lightbox for blogbus--图片显示效果增强插件-万恶的blogbus模板--万恶为你提供模板动力

<< 新系统后台增强插件（Firefox用） | 首页 | [专题]blogbus模板共享搜集 12 >>

lightbox for blogbus--图片显示效果增强插件

该日志由万恶 @ 19:05:41 发布,Tag: blogbus模板博客大巴模板万恶 blogbus lightbox

lightbox for blogbus实现效果

最近在抽空做一个画廊的模板，上面就是这个画廊的截图。做的时候，想到lightbox，就想着要把lightbox应用到blogbus的模板上来。简单的试了下之后发现原版的lightbox的体积太大，于是又在网上找到精简版的Litebox。对比了两者的效果，感觉精简版的lightbox在动画效果上明显不如原版流畅，而且也不支持分组显示功能。（这就是文件体积减小的结果……）

我在下面放出两个版本的实现方法，大家可以自己选择使用。

原版lightbox for blogbus

复制上述代码，放到Head代码模块的最后（如下图）

精简版Lightbox for blogbus

实现方法与原版是一样的，直接复制上述代码到Head中即可(如果是旧模板的话，需要把代码放在Header代码块中，再按文末的方法加以设置）

放置好代码后，我们在日志编辑的时候为图片加上链接后（最好是两张图，一张是小图，链接到大图）。如果你上传的图片尺寸超过640px 的话，系统会自动为你加上一个大尺寸图片的链接。

如果不为图片加上链接的话，是不会有lightbox效果的

以上代码在默认的模板结构下应该是可以正常运行的。如果你使用的模板是由网友共享的模板，其模板代码的结构可能与系统模板的代码结构有所不同（旧模板系统下的模板结构也会与默认的结构有所不同）。当以上代码不能正常运行的时候，请按下面的方法加以设置。

新模板系统代码：在index-posts中找到包围 {#content} 这个系统标签的class，记下这个标签。同时再次找到日志所在区域的ID。

以mytube发布的一款模板为例，我们先来看下日志区域所在标签的层和ID

然后我们来修改下代码中的自定义层和ID。wanc这个变量是所处层，wand则是所处ID，分别修改成 box 和 c01后，去掉变量声明之前的 // 就可以了

var wanc="box"; /*日志所处标签的Class*/
var wand="c01"; /*日志所处标签的ID*/

如果你不懂基本的html知识，那么是很难找到相应的class标签的。这时你可以这样做，将{#content}修改成 <div class="postBody">{#content}</div> 这时就不需要按上面的方法来修改了。

旧模板系统：请在logcontent里找到，同样按照上面据说的方法来修改变量。如果不懂html代码的话，就将改成<div class="postBody"></div>

分类于：模板技巧您可以: 阅读全文 ({#postCounter}) | 评论 (39) | 引用 (4)

[avatar:45]看一下我的博客。
灰色的背景层不能完全显示呢
万恶回复 Rotation 说：
不太清楚是什么问题
(2009-06-04 19:03:24)

Rotation (http://cy-rotation.blogbus.com/) 发表于 2009-05-23 15:55:45 [回复]
[avatar:46]那现在可以在日志中实现画廊吗？我发现detail-post里面也是用postBody这样的块来放置{#content}的，但却无效。
需要怎么处理才能在日志中也实现画廊呢？是简单设置一些东西还是需要新的JS？
万恶回复 Raymond 说：
因为使用的代码和日志页中blogbus评论系统的代码有点冲突，所以目前还是不能在日志页中使用
有时间会考虑更新这个插件的
(2009-04-21 23:31:01)

Raymond (http://lvxingzj.blogbus.com) 发表于 2009-04-21 19:19:06 [回复]
[avatar:46]还有，希望这个功能在日志页面里面也可以实现啊，对于照片浏览来说太不错了，还有下一张等按钮的话就完美了
赞这个插件！
万恶回复 Raymond 说：
其实完全可以做下一张那个，只不过因为一直没时间来更新代码，今后会考虑放出自定义选项更多的图片增强插件的
(2009-04-21 19:07:11)

Raymond (http://lvxingzj.blogbus.com) 发表于 2009-04-21 00:09:27 [回复]
[avatar:46]万恶你好，用这个插件发现在首页正常，但是点击进入日志页面的时候，状态栏会有网页错误。
这次的错误提示是：
char: 2717
错误: 对象不支持此属性或方法
万恶回复 Raymond 说：
恩，我知道，这是因为与blogbus前段时间引用的js库有冲突，待有空时我再来研究解决下这个问题……
(2009-04-21 19:05:59)

Raymond (http://lvxingzj.blogbus.com) 发表于 2009-04-20 23:53:29 [回复]
[avatar:40]这个插件非常好，在FireFox下面运行正常，不过我在IE里用的时候出错了。

提示网页出错，信息是Permission Denied
万恶回复 Raymond 说：
好像是调用的一个js库与bus自动调用的东西产生冲突了

暂时没时间，有空的话再来解决这个问题
(2009-04-20 18:40:54)

Raymond (http://lvxingzj.blogbus.com) 发表于 2009-04-20 16:47:17 [回复]
[avatar:40]非常感谢～～哈哈～谢谢谢谢～

leou (http://design.ileou.cn) 发表于 2009-04-07 00:58:09 [回复]
[avatar:40]谢谢，我自己研究明白了，我自己加了一个postbody。非常感谢，如果可以，能否给我一份js文件？我担心以后你要是删除了呢。
万恶回复 leou 说：
文件不会删除的，js文件你可以自己从那个网址里下载的
(2009-04-06 18:19:22)

leou (http://design.ileou.cn) 发表于 2009-04-06 17:28:05 [回复]
[avatar:40]非常希望能在日志里出现，因为我就是需要这种更能，希望能在有空的时候告诉我一下，十分感谢噢

leou (http://design.ileou.cn) 发表于 2009-04-06 17:16:01 [回复]
[avatar:45]这两天也没等到你回答，我已经找到原因，原来是跟我用到的一个JavaScript冲突。。
万恶回复 qiqiboy 说：
恩，lightbox用到的一个js库与jquery有冲突，以后会想办法解决，或者直接采用另外的图片插件
(2009-04-06 11:04:24)

qiqiboy (http://www.qiqiboy.com) 发表于 2009-04-03 21:45:48 [回复]
[avatar:45]对不起呀。。。大巴一直给我把代码给。。。原以为前后加上/* */就不会了呢。我还是给图片截图地址吧http://yuleqiqi.blogbus.com/files/12386790210.jpg

琪琪boy (http://www.qiqiboy.com) 发表于 2009-04-02 21:31:54 [回复]
[avatar:45]<div id="container">
<div class="postcontrol clearmix">
<span><a href="#" class="fold" title="收起文章内容">fold</a></span>
<span><a href="#" class="unfold" title="展开文章内容">unfold</a></span>
<br class="clear" />
</div>
<div class="content">
{c:0}
<div class="copyright clear">

貌似{c:0}上面没ID，最上面那个弄进去没反应。。。帮忙分析分析吧

琪琪boy (http://www.qiqiboy.com) 发表于 2009-04-02 21:24:20 [回复]
[avatar:40]万恶老师，囧死我了。好像我只要在header中添加任何的代码，我的“匿名评论”功能就不能用了。

求助。

谢谢
万恶回复 Jessica 说：
不太清楚你说的匿名功能无法使用是什么样的情况，
你可以将出错页面给我看下，我好分析问题
(2009-03-31 19:53:50)

Jessica (http://jessica36.blogbus.com) 发表于 2009-03-30 19:00:36 [回复]
[avatar:40]我也很想要这种效果，但是不会弄啊，请教万恶老师：
//var wanc="box"; /*日志所处标签的Class*/
//var wand="c01"; /*日志所处标签的ID*/
这里两行我不懂怎么改，看了您文章中的解释也还是不懂。我在我的index-posts里面找不到您说的那些东西啊，日志所在区域的ID我也不知道在哪里...
麻烦万恶老师能否在百忙之中帮我一下呢？ wshzjaz@163.com
万恶回复彼岸花说：
已经在论坛中加以回复了

你的博客应该不需要修改这两个地方
(2009-02-02 18:34:44)

彼岸花 (http://mentoscool.blogbus.com/) 发表于 2009-02-01 20:41:58 [回复]
[avatar:49]发现在IE7下显示页面有错误，然后点图片就开新窗口了，其他浏览器正常，不知道怎么回事[face:16]
万恶回复 stef 说：
可能是因为你加了其它代码导致的问题，试着去除其它代码测试下
(2009-01-10 15:44:34)

stef (http://stefnosora.blogbus.com) 发表于 2009-01-10 02:34:56 [回复]
[avatar:44]老大，我点击图片后，又弹出了个窗口，怎么解决？[face:17][face:17][face:17][face:17][face:17][face:17][face:17][face:17]
万恶回复 Jason_Chow 说：
主要是因为你的图片超过日志显示区域的尺寸了
有一段代码会自动为缩放图片尺寸，并添加一个链接

解决方法就是，尽量控制图片尺寸在日志显示区域内，并手动添加原图链接（日志中已经提到了）
(2008-12-25 23:38:45)

Jason_Chow (http://jasonchow.blogbus.com) 发表于 2008-12-23 00:08:12 [回复]
[avatar:40]试用了，很不错的功能！
由于照片过多，我也想要能让照片Pre和Next的效果，希望能QQ联系解决，或麻烦您分享出代码。
万恶回复 zhengxianxi 说：
近期会放出功能增强版的lightbox4blogbus插件的，你博客中我也回复了下，呵呵
(2008-12-22 23:28:13)

zhengxianxi (http://xier72.blogbus.com/) 发表于 2008-12-19 00:58:10 [回复]
[avatar:42]哈哈，万恶同学，我已经做好了，只是我在歪酷依旧用的是你提供的代码，不知道类似于“http://lightbox4blogbus.blogbus.com/files/12224080041.js”这样的文件Blogbus提供外链么》
万恶回复 evoncee 说：
好像是不能外链的吧，
你可以上传到歪酷，然后再改变这个文件网址的啊
(2008-12-18 20:36:23)

evoncee (http://2live.blogbus.com/) 发表于 2008-12-15 10:02:10 [回复]
[avatar:42]万恶同学，我的歪酷的地址是http://neveri51and.ycool.com/，恩，我的页面的模板我已经上传了，是这个http://www.hotlinkfiles.com/files/2138168_8w7qb/__________________.rtf]__________________.rtf，希望万恶同学可以帮帮我，谢谢。[face:13]

evoncee (http://2live.blogbus.com/) 发表于 2008-12-14 22:58:11 [回复]
[avatar:42]万恶同学，看了你的帖子我终于学会了Lightbox，非常感谢你。用你的办法我已经在我Blogbus上的博客很好的应用了Lightbox，非常感谢。
但是我想在我的歪酷上也应用一下Lightbox，可能是Blogbus的文件不外链，JS文件不能打开，或者是我的代码放在了不对的地方，总之歪酷上不能用，我很想请教万恶同学，帮帮我，谢谢。[face:17]

evoncee (http://2live.blogbus.com/) 发表于 2008-12-14 22:36:55 [回复]
[avatar:40]在litebox的网站上看到它的介绍
已经支持group了把?
打算两个都试试用用看
谢谢村长的介绍:)
jiee 回复 Daniel 说：
那个，，我不是村长呵呵
(2008-12-14 00:16:07)

Daniel (http://danielfree.blogbus.com) 发表于 2008-12-12 03:25:25 [回复]
[avatar:40]通过使用了，十分感谢。

xixs (http://be840.blogbus.com) 发表于 2008-12-05 18:37:21 [回复]
[avatar:43][face:06]

SuT () 发表于 2008-11-10 14:03:23 [回复]
[avatar:44]为什么隔段时间lightbox就会失效呢需要重新复制代码保存[face:01]
万恶回复 jeau 说：
应该不是吧，主要是因为这个插件的机制是在页面完全加载后才开始运行的……

可能是你没等到页面加载完就点击图片了吧
(2008-10-12 17:35:10)

jeau (http://jeau-x.blogbus.com/) 发表于 2008-10-09 23:27:22 [回复]
[avatar:44]原版lightbox出的有点慢但效果很好的
呼~~

jeau (http://jeau-x.blogbus.com/) 发表于 2008-10-06 16:27:00 [回复]
[avatar:40]真的没想到能做的这么好！

Beach (http://blog.designlinks.cn) 发表于 2008-10-03 15:25:51 [回复]
[avatar:40]sos！有一个问题想请你帮帮忙：这是我的blog：http://k-hole.blogbus.com/，我特别喜欢http://dearpucca.blogbus.com/现在用的新默认风格的模板，我注意到它是拓展了正文宽度的，所以想问问你拓宽正文是要在哪里改呢？谢谢咯！
万恶回复木鸡腿说：
这个需要个修改css中日志区域的宽度

你试试在css 的最后加上

#outerContent {float: none; display: block; width: auto;}
(2008-10-03 21:55:44)

木鸡腿 () 发表于 2008-10-03 13:06:26 [回复]
[avatar:40]原来还有专业的,我喜欢.
其实很多朋友都希望有自己个性的模板.

格瓦拉拉 (http://nowlive.blogbus.com/) 发表于 2008-10-03 10:24:24 [回复]
[avatar:40]不过……好像运用于旧模板下的blogbody和diarycontent之后，IE显示就不正常了，日志字体一下子变大，难道是我IE有问题？FF倒是很正常的
万恶回复 Mira 说：
不太清楚是什么情况，你可以把博客网址贴出来啊
(2008-10-03 21:56:26)

Mira () 发表于 2008-10-02 18:51:05 [回复]
[avatar:40]一下子就搞定了！谢谢！
我发觉旧模板很适合我……新的反而看不懂……

Mira (http://miracleying.blogbus.com) 发表于 2008-10-02 18:16:58 [回复]
[avatar:40]我曾经看过几个高人用THICKBOX做“连接”“关于”“TAG”。看起来非常好看，而且只是显示文字，一开始我觉得很简单，但是试了之后发现很难。
首先是外调JS和CSS文件，我直接用了原版，不知道是不是要修改。
代码中的ID也要自己设。
一切搞定之后，发现虽然可以用THICKBOX显示文字的效果，但是BLOG的显示不正常了。
希望万恶也研究一下用THICHBOX或者LITEBOX显示文字的方法。
THX!

巧勀 () 发表于 2008-10-02 10:03:07 [回复]
评论分页：共2页 1 2 下一页最后一页