具有內部縮放功能的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