特效介绍

jQuery zoom是一款能够查看相册大图的jQuery弹出层插件,点击相册的缩略图,就会弹出该相片对应的大图,并且带有个性的加载动画,还有上一张下一张按钮以及关闭按钮。使用方法非常简单。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等浏览器。
使用方法
1、在head引入下面的css文件
1 | < link rel = "stylesheet" href = "css/zoom.css" media = "all" /> |
2、您的相册列表必须是ul,并且挂了个class="gallery"的类,li里面的img是缩略图,a链接的href是缩略图对应的大图地址。
2 | < li >< a href = "img/gallery/DSC_0008-660x441.jpg" >< img src = "img/gallery/DSC_0008-69x69.jpg" /></ a ></ li > |
3 | < li >< a href = "img/gallery/DSC_0014-660x441.jpg" >< img src = "img/gallery/DSC_0014-69x69.jpg" /></ a ></ li > |
4 | < li >< a href = "img/gallery/DSC_0019-660x441.jpg" >< img src = "img/gallery/DSC_0019-69x69.jpg" /></ a ></ li > |
3、在相册列表代码后面加入js文件:
2 | <script src= "js/zoom.min.js" ></script> |