use jQuery lightBox plugin in bo-blog
技术   June 13, 2009   引用(0)   
点击在新窗口中浏览此图片
前阵子做了个网站,本着“客户都喜欢花花绿绿、华而不实的东西”之原则装了jQuery lightBox plugin,用了下发现效果不错就顺手搬到bo-blog。现本着“有Blog的同学大都喜欢发骚”及“夏季是发骚的季节”之原则推出应景教程:

1. 猛击官网下载jQuery lightBox plugin压缩包,目前最新版本为0.5。
2. 解包,将css, images, js这三个文件夹上传至blog根目录(js文件夹内只用到jquery.js和jquery.lightbox-0.5.pack.js,其他两个js文件可以不传。有归类洁癖的同学可将文件夹内的文件分别上传至blog相应目录,后面添加代码时路径应作相应更改) 。
3. 如下代码二选一,ctrl+c、ctrl+v于 后台- 常规管理- 参数设置- 区域额外代码 内:
代码一(推荐):支持度最广,但由于对所有图片都启用了lightBox,会使“链接到网页的图片”的链接失效。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
$(function() {
  $(".textbox-content a:has(img)").lightBox();
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

代码二:对于“链接到网页的图片”这一类型不启用lightBox,但可能存在其他兼容性问题。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
$(function() {
  $(".textbox-content a:has(img)[href^='attachment']").lightBox();
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

4. 上传XE图片查看效果,庆祝SY(使用)成功。

备注:
1. 本方法不改动过去、现在及将来文章内容,不添加格外div,将来是否继续使用jQuery lightBox plugin对blog内容显示无任何影响。
2. js文件夹中jquery.lightbox-0.5.js,jquery.lightbox-0.5.min.js,jquery.lightbox-0.5.pack.js三个文件的区别尚不清楚,望思想进步的同志告知。(从小体积考量本站现在使用的是jquery.lightbox-0.5.pack.js)

ps:我不喜欢有人拿我的代码去做插件,然后还在插件路径上偷偷骂我。

09.07.12 Update:
修改了图片的选择器,增加了对链接到网页的图片支持
This entry comes from 本站原创 and has been read for 3549 times. It is tagged with , , , .
0cai Email Homepage says: at June 16, 2009 22:37
佩服鬼火兄弟的卓越才能以及有幽有默的言语……
我这不懂技术的人就不在这妄加评论了!
博爱老头 Homepage says: at June 16, 2009 17:56
很好、很强大(还记得这个词不)
长期SY可不行啊。。
风吟 Homepage says: at June 14, 2009 17:21
巡查完毕,我的广告目前情绪稳定。
FORECE Email Homepage says: at June 13, 2009 22:11
很好看啊。不过已经放弃lightbox了,因为他们访问我的站本来就慢,还放Lightbox,估计打开页面就得1分钟了。
鬼火 回复于 June 16, 2009 20:00
速度确实是个问题。不过由于我的模板已经加载了50多k的jquery了,所以加上lightbox对我来说也就多个10k,性价比高^^
chanthon Homepage says: at June 13, 2009 17:12
嗯哼 。。
还不错嘛。。
加载速度很快。
分页: 2/2 第一页 上页 1 2 最后页
发表评论

昵称

网址

电邮

OpenID登入 高级选项 表情