强大的jQuery图片查看器插件Viewer.js

项目中需要用到一个图片查看大图的需求，强大的jQuery图片查看器插件Viewer.js，

经过自己的修改可以运用到自己的项目中：

 效果图：

 

 

讲一下，我调试遇到的一些问题，

第一：   <li><img data-original="images/tibet-1.jpg" src="images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>

图片一定要把 data-original的值附上

 

第二：class="docs-pictures "

这个是关键的类，在main.css中

.docs-pictures >li img {
cursor: -webkit-zoom-in;
cursor: zoom-in;
width: 100%;

}

如果你不想用ul li 这种结构，你可以把这个class="docs-pictures "，加在你图片被包裹的div中：

<div class=" docs-pictures">
<img data-original="/img/test/1.jpg" src="/img/test/1.jpg" />
</div>

同时你也需要修改main.css中的样式

.docs-pictures img {
cursor: -webkit-zoom-in;
cursor: zoom-in;
width: 100%;
}

 

下面给出我自己调试的出来的Demo下载地址：

 https://github.com/Vinkong/ViewJs