2

I am using elevate zoom with Apple-style Slideshow Gallery and all works fine. However the zoom feature is zooming in the hidden images which are hidden by the slider until they become visible when clicked on the thumbnail. The original code for initiating the zoom plugin was 

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

I got the below JavaScript code from other question which seemed to solve the problem but it activates the image on hover and disables it when not hovered. What I want is to have the zoom to show only on visible images not the hidden one. Can someone help me out please?

<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>
4

1 回答 1

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

于 2013-12-05T11:15:59.613 回答