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

最新推荐文章于 2025-06-23 12:22:17 发布

piperzero

最新推荐文章于 2025-06-23 12:22:17 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：网站建设

本文链接：https://blog.csdn.net/freejs/article/details/16879165

网站建设专栏收录该内容

740 篇文章

订阅专栏

这篇博客介绍了如何利用Fancybox实现产品详情页中的图片组展示效果，用户可以点击缩略图切换大图，提供无缝浏览体验。示例代码包括HTML结构和JavaScript配置，展示了如何结合elevateZoom插件实现图片放大的功能，并通过jQuery绑定事件实现点击切换大图并调用Fancybox的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

演示

  XML/HTML Code
 

  <div class="zoom-wrapper">  
<div class="zoom-left">  
<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>  
  
<div id="gallery_01" style="width:500px; padding-left:88px;">  
   
<a href="#" class="elevatezoom-gallery active" data-update="" data-image="images/image1.png" data-zoom-image="images/image1.jpg">  
<img src="images/image1.png" width="100"></a>  
  
<a href="#" class="elevatezoom-gallery" data-image="images/image2.png" data-zoom-image="images/image2.jpg"><img src="images/image2.png" width="100"></a>  
  
<a href="http://www.elevateweb.co.uk/image-zoom/tester" class="elevatezoom-gallery" data-image="images/image3.png" data-zoom-image="images/image3.jpg">  
     <img src="images/image3.png" width="100">  
</a>  
  
<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>  
      
</div>  
</div>  
</div>  

 

  JavaScript Code
 

  <script type="text/javascript"  
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  
</script>  
</div>  
</div>  
<script type="text/javascript">  
$(document).ready(function () {  
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active", imageCrossfade: true, loadingIcon: "images/spinner.gif"});   
  
$("#zoom_03").bind("click", function(e) {    
  var ez =   $('#zoom_03').data('elevateZoom');  
  ez.closeAll(); //NEW: This function force hides the lens, tint and window   
    $.fancybox(ez.getGalleryList());  
  return false;  
});   
  
});   
</script>  

 