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

提升变焦不起作用

1 个答案: