-1

I have this simple image zoom jQuery. Here is a Demo example. It uses the elevateZoom jQuery.

The code behind is very simple: 

<img id="zoom_05" src='small_image1.png' data-zoom-image="large_image1.jpg"/>
<script>
   $vc("#zoom_05").elevateZoom({
  zoomType              : "inner",
  cursor: "crosshair"
});
</script>

My question, is how can i make the large image load on demand, only when the mouse is over it. Please have a look at this demo example and let me know what i need to add in the code.

RaduS
  • 2,465
  • 9
  • 44
  • 65
  • The "demo example" page loads both images at the beginning, a small [`png`](http://elegantmembers.com/demo/images/small/image1.png) and a large [`jpg`](http://elegantmembers.com/demo/images/large/image1.jpg), both about 175 KB. – Paul S. Jun 26 '13 at 15:01
  • Yes, i know that. My question is how can i prevent the loading of the large image until the mouse is over the image. I don't want it to load at the begging – RaduS Jun 26 '13 at 15:02
  • It doesn't look like that is supported by the plugin you're using. http://www.elevateweb.co.uk/image-zoom/configuration – Jeremy Gallant Jun 26 '13 at 15:04
  • Is there anything i can do then? – RaduS Jun 26 '13 at 15:04
  • It's because i added `var $vc = jQuery.noConflict();` at the end of the script so it doesn't enter in conflict with other jQuery's i have. – RaduS Jun 26 '13 at 15:08

2 Answers2

2

img element (id="zoom_05") above, would not load large_image1.jpg on its own. Large image load happens because elevateZoom() looks into its data-zoom-image value and immediately loads it. One way around this behaviour is to defer elevateZoom() until user hover's over the small image for the first time. Quick example:

   jQuery( function () {

   var elevate_zoom_attached = false, $zoom_05 = $("#zoom_05") ;

    $zoom_05.hover(
     // hover IN
     function () {
        if ( ! elevate_zoom_attached ) {
        $zoom_05.elevateZoom({
                  zoomType : "inner",
                  cursor   : "crosshair"
                });
        elevate_zoom_attached = true ;
        };
    },
     // hover OUT
     function () {
        if ( elevate_zoom_attached) { // no need for hover any more
          $zoom_05.off("hover");
        }
     }
  );

}) ;

Mind you this is an quick, on-top-of-my-head code, but should work ... Also in this case elevateZoom() action might not be immediate while large image loading is going on.

  • Thanks for the code. Can you please tell where should i insert it. – RaduS Jun 26 '13 at 15:36
  • 1
    just embeded the code into the standard jQuery( function () {}); startup event handler, which happens as soon as dom is ready ... –  Jun 26 '13 at 15:42
0

I used this idea to initiate zoom on any number of images on the same page by adding a zoom class to the image. It works without any HOVER OUT

<img class="zoom" src="myimage.png" data-zoom-image="mybigimage.png"/>

$('.zoom').hover(
  // hover IN
  function () {

   var currImg = $(this); //get the current image
   if (!currImg.hasClass('zoomon')) { //if it hasn't been initialized
       currImg.elevateZoom(); //initialize elevateZoom
       currImg.addClass('zoomon'); //add the zoomon class to the img so it doesn't re-initialize
   }
})
osyntax
  • 1