前阵子做了个网站,本着“客户都喜欢花花绿绿、华而不实的东西”之原则装了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" />
<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" />
<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内容显示无任何影响。
ps:我不喜欢有人拿我的代码去做插件,然后还在插件路径上偷偷骂我。
09.07.12 Update:
修改了图片的选择器,增加了对链接到网页的图片支持
天朝萝莉控之歌
rssExtraIn

我这不懂技术的人就不在这妄加评论了!
长期SY可不行啊。。
还不错嘛。。
加载速度很快。