阿里云服务器

为了增加zblog内容页图片的特效我们需要用到jQuery Lightbox。下面我来给大家介绍添加的方法:

1、 首先你需要获得jQuery Lightbox的所有文件。可从官方网站下载:

2、将解压包里面的  JS  和  CSS和图像文件上传到网站源码根目录即可。

3、编辑文章模板文件b_article-single.html,将以下代码插入到模板适当位置:

XML/HTML代码
  1. <script type="text/javascript" src="/jquery/jquery.js"></script>  

  2. <script type="text/javascript" src="/jquery-lightbox/js/jquery.lightbox-0.5.pack.js"></script>  

  3. <link rel="stylesheet" type="text/css" href="/jquery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />  

 

4、这一步式最关键的,也就是对页面的文章进行调用,jquery-lightbox默认有多种调用方式,我们可以自由发挥(在这里,我选择的就是第二种方式):

XML/HTML代码
  1.       <script type="text/javascript">    

  2.      $(function() {    

  3.      // 第一种选择    

  4.      $('a[@rel*=lightbox]').lightBox(); // 选择所有的rel为lightbox的链接    

  5.     // 第二种选择    

  6.      $('#gallery a').lightBox(); // 选择id为gallery下的所有链接    

  7.     // 第三种选择    

  8.     $('a.lightbox').lightBox(); // 选择所有class为lightbox的链接    

  9.     // 第四种选择    

  10.     $('a').lightBox(); // 选择页面中所有的链接    

  11.     //&hellip;&hellip;&hellip;&hellip;还有更多的选择,发挥你的想象力吧    

  12. });    

  13. </script>    

 

相关阅读: