具有内部缩放功能的CSS图像库

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）请勿在单个html中使用ID一次以上-您使用过“ zoom_01” 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 个解决方案

解决方案1
0 已采纳 2014-04-22 08:36:10

具有内部缩放功能的CSS图像库

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-04-22 08:36:10

解决方案1
0 已采纳 2014-04-22 08:36:10