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

Question

I have a working inner-zoomable image using the code below and I would like to modify this to an image gallery with zoom of the selected image element, but cannot figure out how to begin. 我使用下面的代码制作了一个内部可缩放的图像，并且希望将其修改为具有所选图像元素缩放的图像库，但是无法弄清楚如何开始。 What I would like is for the image source in the second hyperlink below ("img_02" src=") to substitute for the first. Anyone shed any light please? 我想用下面的第二个超链接（“ 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 should never be used more then once in a single html ~ you have used "zoom_01" 3 times use it only on the first image. 1）请勿在单个html中使用ID一次以上-您使用过“ zoom_01” 3次后，只能在第一张图片上使用它。

2) To create a gallery you should use this code: 2）要创建画廊，您应该使用以下代码：

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

Here is the fixed HTML: 这是固定的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>

And yes the demo site HTMl code is wrong :) ~ i will send them a mail. 是的，演示站点的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