一款lightbox图片幻灯片浏览插件

    之前移植emlog时就发现lightbox图片幻灯片浏览插件了，因为移植过程中出现了很大的困难，所以没有及时把教程写出来，今天抽空再研究了一下，才把这个lightbox图片幻灯片浏览插件教程写出来

    如果你要使用这款插件，那么一定需要引用jquery插件库，但是jquery的版本不能太高，版本过高不能正常使用，推荐jquery.min.js-1.7.1的版本，附件中也是1.7.1的版本

    其次你需要引用一个jquery.lightbox.css和一个jquery.lightbox.min.js这两个就是lightbox图片幻灯片浏览插件的关键，大致如下：

<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="lightbox/themes/default/jquery.lightbox.css" />
<script type="text/javascript" src="lightbox/jquery.lightbox.min.js"></script>

    具体路径请自行调整

    其次你需要写一个js挂载点，大概内容如下：

<!--幻灯片挂载-->
<script type="text/javascript">
  $(function($){
    $(".acd a").has("img").each(function() {
      $(this).lightbox();
      $(this).attr("rel","xygroup");
    });
  });
</script>

    然后放上一段引用图片的标准格式：

<div class="acd"><a href="图片地址" rel="xygroup"><img src="图片地址" ></a></div>

讲解一下：

1. .acd是div的class可以任意更改，但是一定要匹配
2. a标签是必须的，只有a标签才能引导幻灯片插件加载其链接的图片出来
3. rel=”xygroup”也是必须加在a标签中的，如果a标签中没有rel=”xygroup”，幻灯片也是不能被成功加载的

上面的演示就是十分基础的演示了

    有的朋友会说了，如果插入图片的时候没有给img标签加a标签，那么应该怎么使用呢？

这个问题也是我在emlog移植到wordpress时遇到的问题，wordpress插入的图片是不包含a标签的，我们也不可能说每插入一个img图片就去改代码加a吧

    在我苦苦寻觅中，找到了这段代码，可以完美解决这个问题：

<!--给图片嵌套a标签-->
<script type="text/javascript">
  jQuery(document).ready(function($){
    $('.acd img').each(function(i){
      if (! this.parentNode.href) {
        $(this).wrap("<a href='"+this.src+"'></a>");
      }
    });
  });
</script>

    老样子，把.acd与你的div中的class匹配一下，然后你再看就会发现img被a标签包围了

    附件中有一个demo演示和需要用到的js、css

一款lightbox图片幻灯片浏览插件