放大图片组 缩略图大图展示 fancybox 图片组浏览

一般用于产品详情展示，例如京东,易迅都是类似的效果

 css文件和js请到演示页面查看

演示

 

 

XML/HTML Code

1. <div class="zoom-wrapper">  
2. <div class="zoom-left">  
3. <div style="height:274px;width:411px;" class="zoomWrapper"><img style="border: 1px solid rgb(232, 232, 230); position: absolute;" id="zoom_03" src="images/image1.png" data-zoom-image="images/image1.jpg" width="411"></div>  
4.   
5. <div id="gallery_01" style="width:500px; padding-left:88px;">  
6.    
7. <a href="#" class="elevatezoom-gallery active" data-update="" data-image="images/image1.png" data-zoom-image="images/image1.jpg">  
8. <img src="images/image1.png" width="100"></a>  
9.   
10. <a href="#" class="elevatezoom-gallery" data-image="images/image2.png" data-zoom-image="images/image2.jpg"><img src="images/image2.png" width="100"></a>  
11.   
12. <a href="http://www.elevateweb.co.uk/image-zoom/tester" class="elevatezoom-gallery" data-image="images/image3.png" data-zoom-image="images/image3.jpg">  
13.      <img src="images/image3.png" width="100">  
14. </a>  
15.   
16. <a href="http://www.elevateweb.co.uk/image-zoom/tester" class="elevatezoom-gallery" data-image="images/image4.png" data-zoom-image="images/image4.jpg"><img src="images/image4.png" width="100"></a>  
17.       
18. </div>  
19. </div>  
20. </div>  

JavaScript Code

1. <script type="text/javascript"  
2. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  
3. </script>  
4. </div>  
5. </div>  
6. <script type="text/javascript">  
7. $(document).ready(function () {  
8. $("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active", imageCrossfade: true, loadingIcon: "images/spinner.gif"});   
9.   
10. $("#zoom_03").bind("click", function(e) {    
11.   var ez =   $('#zoom_03').data('elevateZoom');  
12.   ez.closeAll(); //NEW: This function force hides the lens, tint and window   
13.     $.fancybox(ez.getGalleryList());  
14.   return false;  
15. });   
16.   
17. });   
18. </script>  

 

原文地址:http://www.freejs.net/article_jquerytupiantexiao_94.html