Javascript 缩放不工作

我正在使用苹果风格的幻灯片库和所有作品的提升缩放。但是，缩放功能会放大隐藏的图像，这些图像被滑块隐藏，直到单击缩略图时可见。启动zoom插件的原始代码是

$("#zoom_01").elevateZoom();

我从另一个问题中得到了下面的JavaScript代码，它似乎解决了这个问题，但它在悬停时激活图像，在未悬停时禁用图像。我想要的是让缩放只显示在可见的图像上，而不是隐藏的图像上。有人能帮我吗

<div id="main">
<div id="gallery">
<div id="slides"><!--Main image-->
<div class="slide"><img src="img/sample_slides/macbook.jpg" data-zoom-image="images/big_mac.png" id="zoom_01" width="300" height="400" /></div>
<div class="slide"><img src="img/sample_slides/iphone.jpg" data-zoom-image="images/big_iphone.png" id="zoom_02" width="300" height="400" /></div>
</div>
<div id="menu"><!--Thumbnail-->
<ul>
<li class="fbar">&nbsp;</li> 
<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li>
<li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li>
</ul>
</div>
</div>
</div>
<script>
jQuery( function () {

   var elevate_zoom_attached = false, $zoom_01 = $("#zoom_01") ;

    $zoom_01.hover( 
     // hover IN
     function () {
        if ( ! elevate_zoom_attached ) {
        $zoom_01.elevateZoom({

                  cursor   : "crosshair"
                });
        elevate_zoom_attached = true ;
        };
    },
     // hover OUT
     function () {
        if ( elevate_zoom_attached) { // no need for hover any more
          $zoom_01.off("hover");
        }
     }
  );

}) ;

jQuery( function () {

   var elevate_zoom_attached = false, $zoom_02 = $("#zoom_02") ;

    $zoom_02.hover(
     // hover IN
     function () {
        if ( ! elevate_zoom_attached ) {
        $zoom_02.elevateZoom({

                  cursor   : "crosshair"
                });
        elevate_zoom_attached = true ;
        };
    },
     // hover OUT
     function () {
        if ( elevate_zoom_attached) { // no need for hover any more
          $zoom_02.off("hover");
        }
     }
  );

}) ;
</script>

jQuery（函数（）{
var REVAL_zoom_attached=false，$zoom_01=$（“#zoom_01”）；
$zoom_01。悬停（
//盘旋
函数（）{
如果（！提升\缩放\附加）{
$zoom_01.0升空间({
光标：“十字线”
});
提升\缩放\附加=真；
};
},
//悬停
函数（）{
如果（已连接提升缩放）{//不再需要悬停
$zoom_01.off（“悬停”）；
}
}
);
}) ;
jQuery（函数（）{
var REVAL_zoom_attached=false，$zoom_02=$（“#zoom_02”）；
$zoom_02.hover(
//盘旋
函数（）{
如果（！提升\缩放\附加）{
$zoom_02.0升空间({
光标：“十字线”
});
提升\缩放\附加=真；
};
},
//悬停
函数（）{
如果（已连接提升缩放）{//不再需要悬停
$zoom_02.off（“悬停”）；
}
}
);
}) ;

我认为您没有将ElevateToom设置为使用它提供的gallery功能

与其像以前那样编写脚本，为什么不将选项作为变量传递呢

jQuery("#zoom_1").elevateZoom({    //the feature image
  gallery: 'menu',                 //it will seek out the images in the div#menu
  cursor: 'crosshair'
});

记住在每个缩略图上标记

数据缩放图像=“

”，并带有指向较大图像的链接

---

有关更多信息，请访问Elevate Zoom网站：

有人能帮忙吗？@Lmxc您想让我重新格式化您的代码片段以表达我的意思吗？有关悬停问题以及隐藏图像上ElevateToom触发问题的详细信息，请参阅：