首页>>Jquery图片>>放大图片组 缩略图大图展示 fancybox 图片组浏览(2013-10-31)

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

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

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

放大图片组 缩略图大图展示 fancybox 图片组浏览
赞赏支持
立刻微信赞赏支持 关闭

 

 

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