1

jQuery lightBox plugin for bo-blog

说明:jQuery lightBox plugin不仅仅使用于bo-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于 后台- 常规管理- 参数设置- 区域额外代码 内:

1
2
3
4
5
6
7
8
<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" />

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)

以上内容出自鬼火的文章http://404cn.net/blog/use-jQuery-lightBox-plugin-in-bo-blog/

1
$(".textbox-content a:has(img)").lightBox();

上述代码是定义图片是否使用lightbox的规则,你也可以根据情况自己修改。
我从网络上收集了4个写法,仅供参考(不一定适用于bo-blog,只是教大家怎么写?):
// Use this example, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});

效果演示:请用你纯洁的手拿起鼠标点点下面的美眉吧,^_^

你也可以使用以下插件!即插即用。

安装完毕后请到插件后台设置是用google api 还是你主机的jquery.js文件

此插件为风吟所做。为尊重鬼火,修改了路径,^_^

下载地址:http://smyx.googlecode.com/files/fy_lightbox.zip

已有 0 用户参与0
0 : 0
+1已打分
分享到:
已有 1 条评论
  1. [‘bet?]adj. 较好的,更好的; adv. 更好地; vt. &vi. 使…更好,超越; n. 更好的事物5
    历史查词:

    2012年1月7日 01:30来自腾讯微博 回复