提升变焦不起作用

Question

我在 Apple 风格的幻灯片库中使用提升缩放功能，一切正常。然而，缩放功能会放大被滑块隐藏的隐藏图像，直到单击缩略图时它们变得可见。启动缩放插件的原始代码是

$("#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>

Answer 1

我认为您没有设置 elevateZoom 来使用它提供的图库功能。

与其像你一样编写脚本，为什么不直接将选项作为变量传递？

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

记得在每个缩略图上标记data-zoom-image=""，并附上大图的链接。

更多信息可以在 Elevate Zoom 网站上找到：http://www.elevateweb.co.uk/image-zoom/examples