为了增加zblog内容页图片的特效我们需要用到jQuery Lightbox。下面我来给大家介绍添加的方法:
1、 首先你需要获得jQuery Lightbox的所有文件。可从官方网站下载:
2、将解压包里面的 JS 和 CSS和图像文件上传到网站源码根目录即可。
3、编辑文章模板文件b_article-single.html,将以下代码插入到模板适当位置:
-
<script type="text/javascript" src="/jquery/jquery.js"></script>
-
<script type="text/javascript" src="/jquery-lightbox/js/jquery.lightbox-0.5.pack.js"></script>
-
<link rel="stylesheet" type="text/css" href="/jquery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />
4、这一步式最关键的,也就是对页面的文章进行调用,jquery-lightbox默认有多种调用方式,我们可以自由发挥(在这里,我选择的就是第二种方式):
-
<script type="text/javascript">
-
$(function() {
-
// 第一种选择
-
$('a[@rel*=lightbox]').lightBox(); // 选择所有的rel为lightbox的链接
-
// 第二种选择
-
$('#gallery a').lightBox(); // 选择id为gallery下的所有链接
-
// 第三种选择
-
$('a.lightbox').lightBox(); // 选择所有class为lightbox的链接
-
// 第四种选择
-
$('a').lightBox(); // 选择页面中所有的链接
-
//…………还有更多的选择,发挥你的想象力吧
-
});
-
</script>
相关阅读: