Elevate Zoom 插件中的缩放图像完全相同答案

【问题标题】：Zoomed images all the same in Elevate Zoom pluginElevate Zoom 插件中的缩放图像完全相同
【发布时间】：2015-06-02 18:48:50
【问题描述】：

我无法在提升缩放插件的缩放窗口中显示正确的图像。我正在为我的缩略图使用 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>

【问题讨论】：

标签： jquery css

【解决方案1】：

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

【讨论】：