使用js弹出层插件lightcase实现文章内图片单击查看大图

为了实现图文展示中点击图片看大图功能，在网上找了一个点击图片查看大图的代码，看着不错就下载下来看了下，但是发现不能简单的粘贴过去使用，于是自己折腾折腾，用了比较笨的方法实现了查看大图，麻烦的一点就是图文详情像文章一样，内容和图片是用编辑器写的，保存进去的内容如下列这种

<div class="arcticle">
这里是一幅图
<img  src="www.zhangxingju.com/图片路径" class="zoom" width="600" /> 
</div>

但是下载的例子代码实现所需要的html是这样写的

<!--需要用a标签包裹着img 获取 img的src到href上来调用 不知其他标签可以不  没测试 也没看插件代码（也看不懂）-->
<a href="www.zhangxingju.com/img/1b.jpg" class="showcase" data-rel="lightcase">
     <img src="www.zhangxingju.com/img/1b.jpg" width="300" height="200" alt=""/>
</a>

总不能去改编辑器的代码吧，那太复杂了，后来想到一个笨方法，就是页面加载时用JS将文章中的img代码替换成a标签包裹的代码，然后就可以使用这个JS插件了

/*记得引用JQ和lightcase的样式及JS，这时两个CDN 链接 我用的JQ是1.11.2的*/
//cdn.bootcss.com/lightcase/2.3.4/css/lightcase.min.css
//cdn.bootcss.com/lightcase/2.3.4/js/lightcase.min.js

$(function () {
    /*大图展示 修改文章内图片代码*/
    $(".arcticle img").each(function (index,element) {
            var str='<a href="'+$(this).attr('src')+'" class="showcase" data-rel="lightcase"><img width="'+$(this).attr('width')+'" class="zoom" src="'+$(this).attr('src')+'" /></a>';
            $(this).after(str);
           $(this).remove();
    });

    $('.showcase').lightcase({transition: 'none'});  /*调用lightcase方法大图初始化，用了没有任何效果最简单的一个 例子中还有其他好多方法*/
});

最后生成这样的代码，点击图片就可以查看大图了

<a data-rel="lightcase" class="showcase" href="www.zhangxingju.com/图片路径">
      <img width="600" id="aimg_229" src="www.zhangxingju.com/图片路径" class="zoom">
</a>

下载的那个例子链接： http://pan.baidu.com/s/1sltIaSl 密码: 3q6x