Question

我下载了提升变焦演示，但是当我添加第5张图像时，缩放功能无法更改放大的图像。当我只有4张图片而我无法找到导致它的原因时它工作得很好。

这是主体，我把css等放在html中，直到我设法解决它。

<html>
<head>
    <meta charset='utf-8'/>
    <title>jQuery elevateZoom Demo</title>
    <script src='jquery-1.8.3.min.js'></script>
    <script src='jquery.elevatezoom.js'></script>

    <style>
    /*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white;}

 /*Change the colour*/
 .active img{border:2px solid #333 !important;}
    </style>

</head>
<body>

<img id="zoom_03" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg"/>

<div id="gallery_01">

  <a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg">
    <img id="zoom_03" src="images/thumb/image1.jpg" />
  </a>

  <a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">
    <img id="zoom_03" src="images/thumb/image2.jpg" />
  </a>

  <a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">
    <img id="zoom_03" src="images/thumb/image3.jpg" />
  </a>

  <a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">
    <img id="zoom_03" src="images/thumb/image4.jpg" />
  </a>

    <a href="#" data-image="images/small/image5.png" data-zoom-image="images/large/image5.jpg">
    <img id="zoom_03" src="images/thumb/image5.jpg" />
  </a>


</div>

<script>
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom'); 
    $.fancybox(ez.getGalleryList());
  return false;
});
</script>


<script>
    $('#zoom_03').elevateZoom({

zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
   }); 
</script>

</body>
</html>

主要代码来自这个网站 here

我尝试的功能是Gallery＆amp; Lightbox one

elevateZoom添加另一张图片

0 个答案: