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>
Lmxc
  • 285
  • 4
  • 6
  • 17

1 Answers1

1

I don't think you have set elevateZoom to use the gallery feature it offers.

Instead of writing the script like you have, why not just pass the options as a variable?

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

Remember to tag on the data-zoom-image="" on each thumbnail, with a link to the larger image.

More information can be found on the Elevate Zoom website: http://www.elevateweb.co.uk/image-zoom/examples

ckhatton
  • 1,359
  • 1
  • 14
  • 43
  • @Lmxc Would you like me to re-format your code snippet to express what I mean? – ckhatton Dec 05 '13 at 11:16
  • see for an elaboration of the hover issue combined with the problem of elevateZoom triggering on hidden images: http://stackoverflow.com/questions/21234070/elevatezoom-disable-hidden-elements/23414384#23414384 – Wolfgang Fahl May 02 '14 at 09:48