How to change data-zoom-image value

Question

I\'m using elevate zoom effects for zooming facility of image, my image tag is:

Answer 1

After change of data zoom-image attribute, you need to re-initialize with elevateZoom like this:

$("#zoom_01").data('zoom-image', 'newURL').elevateZoom({
   responsive: true,
   zoomType: "lens", 
   containLensZoom: true
}); 

Answer 2

you have just to use the gallery feature provided by the plugin itself, just wrap your images into a container

<img src="img1-small.jpg" id="zoom_x" data-zoom-image="img1-large.jpg">
<div id="my_images">
<a href="#" data-image="img1-small.jpg" data-zoom-image="img1-large.jpg"><img src="img1-small.jpg" alt=""></a>
<a href="#" data-image="img2-small.jpg" data-zoom-image="img2-large.jpg"><img src="img2-small.jpg" alt=""></a>
...
</div>

then you have to call the plugin like this:

$("#zoom_x").elevateZoom({ gallery: "my_images", zoomType   : "inner", cursor: "crosshair", imageCrossfade: true });

Answer 3

I think you need this...

$("#zoom_01").attr('data-zoom-image', 'new path');

Answer 4

I was having exactly the same problem here, figured it out: it probably doesn't work because the plugin doesn't support changing that particular attribute - it has its own gallery functionality. There are errors in their own documentation, this is how it works:

HTML for main image & thumbnails:

<img id="bigpic" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>

<div id="gal1">

<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img src="thumb/image1.jpg" />
</a>

<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img src="thumb/image2.jpg" />
</a>

</div>

jQuery for initializing the gallery:

$("#bigpic").elevateZoom({
gallery:'gal1',
galleryActiveClass: 'active'

• plus whatever other attributes you want to give it

jQuery for passing the images to the main container:

$("#bigpic").bind("click", function(e) {  
var ez =   $('#bigpic').data('elevateZoom');    
$.fancybox(ez.getGalleryList());
return false;
});

I'm new to jQuery and I don't really 100% understand the mechanics here, but that's how I got it to work, I hope it works for you!

Answer 5

var zoomElement = $('#zoom_01');

// destroy old one
zoomElement.removeData('zoom-image');
$('.zoomContainer').remove();

// set new one
zoomElement.attr('data-zoom-image', image_large_size);
zoomElement.attr('src', image_normal_size);

// reinitial elevatezoom
zoomElement.elevateZoom();

Answer 6

If you want change image which shown as zoomed, simply do this

$('.zoomWindowContainer div').stop().css("background-image","url("+ changed_image +")");