CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lmxc
Lmxc

Reputation: 283

elevate zoom not working

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>

Upvotes: 2

Views: 10411

Answers (1)

ckhatton
ckhatton

Reputation: 1572

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

Upvotes: 1

Related Questions