jquery - Elevate Zoom 插件中的缩放图像完全相同

Question

我无法在 elevate 缩放插件的缩放窗口中显示正确的图像。我正在为我的缩略图使用 jcarousel 滚动。这就是为什么我的缩略图位于不同的 div 中。该页面效果很好。我单击滚动框中的缩略图，它会在右侧显示图像。然后我将鼠标悬停在显示的图像上以对其进行缩放。当我将鼠标悬停在右侧显示的不同图像上时，我会在缩放窗口中看到相同的图像。当我将鼠标悬停在马的图像上时，我会在缩放窗口中看到马的图像。

当我将鼠标悬停在鸟的图像上时，我会在缩放窗口中看到马的图像。

当我将鼠标悬停在树的图像上时，我会在缩放窗口中看到马的图像。

当我将鼠标悬停在椅子的图像上时，我会在缩放窗口中看到马的图像。

对于显示的所有不同图像，我在缩放窗口中得到相同的图像。我认为需要改进的是 js 和 ID。

如有任何帮助，我们将不胜感激。

<div id="slideshow-main">
    <ul>
        <li class="p1 active">
            <a href="#">
                <img id="zoom_mw" src="images/horsesmall.jpg" data-zoom-image="images/horsebig.jpg" alt=""/><br />
                <span class="content"><h1>Horse</h1><p>Text, Text, Text.</p></span>
            </a>
        </li>
        <li class="p2">
            <a href="#">
                <img id="zoom_mw" src="images/birdsmall.jpg" data-zoom-image="images/birdbig.jpg" alt=""/><br />
                <span class="content"><h1>Bird</h1><p>Text, Text, Text.</p></span>
            </a>
        </li>
        <li class="p3">
            <a href="#">
                <img id="zoom_mw" src="images/treesmall.jpg" data-zoom-   image="images/treebig.jpg" alt=""/><br />
                <span class="content"><h1>Tree</h1><p>Text, Text, Text.</p></span>
            </a>
        </li>
        <li class="p4">
            <a href="#">
                <img id="zoom_mw" src="images/chairsmall.jpg" data-zoom-image="images/chairbig.jpg" alt=""/><br />
                <span class="content"><h1>Chair</h1><p>Text, Text, Text.</p></span>
            </a>
        </li>
    </ul>                                       
</div>


<div id="slideshow-carousel" style="margin-top: -289px; position: absolute;">               
      <ul id="carousel" class="jcarousel jcarousel-skin-tango">
        <li><a href="#" rel="p1"><img src="images/horsethumb.jpg" width="110" height="110" alt="#"/></a></li>
        <li><a href="#" rel="p2"><img src="images/birdthumb.jpg" width="110" height="110" alt="#"/></a></li>
        <li><a href="#" rel="p3"><img src="images/treethumb.jpg" width="110" height="110" alt="#"/></a></li>
        <li><a href="#" rel="p4"><img src="images/chairthumb.jpg" width="110" height="110" alt="#"/></a></li>
      </ul>
</div>
<script type="text/javascript">
      $("#zoom_mw").elevateZoom({gallery:'slideshow-main', scrollZoom : true', 
 galleryActiveClass:'active'}); 
</script>

</body>

</html>

Answer 1

您可以找到图库示例 here在外部控制部分。该代码向您展示了如何删除 galleryActiveClass 并重新添加它。我的回答可能为时已晚，但有人会觉得它有用。