Question

我使用下面的代码有一个工作内部可缩放图像，我想将其修改为图像库，缩放所选图像元素，但无法弄清楚如何开始。我想要的是下面第二个超链接（“img_02”src =“）中的图像源代替第一个。任何人都可以放任何光吗？

<html>
<head>
<script src="../jquery-1.8.3.min.js"></script>
<script src="../jquery.elevatezoom.js"></script>
</head>
<body>

    <img id="zoom_01" src="../images/package.jpg"  data-zoom-image="../images/package_big.jpg">
       <img id="zoom_01" src="../images/package.jpg"  data-zoom-image="../images/package_big.jpg">    
       <div id="zoom_01">
              <a href="#" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
              <img id="img_01" src="../images/package_thumb.jpg" /></a>

              <a href="#" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
              <img id="img_02" src="../images/coffee_thumb.jpg" /></a>
       </div>

<!--initiate the plugin and pass the id of the div containing gallery images-->

<script>
$('#zoom_01').elevateZoom({zoomType: "inner", cursor: "crosshair",}); 
</script>

</body>
</html>

Answer 1

1）ID永远不应该在单个html中使用一次〜你已经使用了＆＃34; zoom_01＆＃34; 3次仅在第一张图片上使用它。

2）要创建图库，您应该使用以下代码：

$("#zoom_01").elevateZoom({gallery:'gallery', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});

这是固定的HTML：

<img id="zoom_01" src="../images/package.jpg"  data-zoom-image="../images/package_big.jpg">
<div id="gallery">
      <a href="../images/package_big.jpg" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
      <img id="img_01" src="../images/package_thumb.jpg" /></a>

      <a href="../images/coffee_big.jpg" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
      <img id="img_02" src="../images/coffee_thumb.jpg" /></a>
</div>

是的，演示网站HTMl代码错了:)我会给他们发邮件。

具有内部缩放的css图库

1 个答案: