How do i call the destroy function in elevateZoom ? The documentation does't have any mention of it , If i do a quick ctrl+f in the source, i see an option for disable , But i am not sure how to disable or destroy elevateZoom ?

I have the following code:

HTML:

<img id="img_01" src=".jpg" data-zoom-image=".jpg"/> 

JS:

 $("img").elevateZoom({ zoomType    : "inner", cursor: "crosshair" , easing : true });

setTimeout(function(){}
      // how to destroy elevateZoom on image ? 
,2000); 

Now after 3 seconds, i wish for the zoom functionality not to work(I am doing this to isolate my problem, Now please don't ask a counter question as to why the heck i am doing this). What do i do inside the setTimeout() that the elevateZoom becomes non-functional.

FIDDLE HERE

How do i call the destroy function in elevateZoom ? The documentation does't have any mention of it , If i do a quick ctrl+f in the source, i see an option for disable , But i am not sure how to disable or destroy elevateZoom ?

I have the following code:

HTML:

<img id="img_01" src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" data-zoom-image="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg"/> 

JS:

 $("img").elevateZoom({ zoomType    : "inner", cursor: "crosshair" , easing : true });

setTimeout(function(){}
      // how to destroy elevateZoom on image ? 
,2000); 

Now after 3 seconds, i wish for the zoom functionality not to work(I am doing this to isolate my problem, Now please don't ask a counter question as to why the heck i am doing this). What do i do inside the setTimeout() that the elevateZoom becomes non-functional.

FIDDLE HERE

• javascript
• jquery
• jquery-plugins

• 1 Try the bottom solution here: github.com/elevateweb/elevatezoom/issues/8 – Clayton Leis Commented Aug 17, 2015 at 11:23
• @ClaytonLeis will look into it , if its correct i'll tell u and you can add it as an answer ! – Alexander Solonik Commented Aug 17, 2015 at 12:04

4 Answers 4

Since Elevate Zoom does not have a native destroy, you'll have to do something like this:

setTimeout(function(){
      $.removeData($('img'), 'elevateZoom');
      $('.zoomContainer').remove();
},2000); 

This works for me. Hope this helps!

A much better solution is in-built into elevatezoom:

var ezApi = $('#primaryImage').data('elevateZoom');
ezApi.changeState('disable');

You can use this. I needed to turn off the ElevatedZoom on Mobile Devices as Opencart has a Gallerybox and people can make the image bigger easily via the two finger swipe movement. So... this worked like a charm.

Its quiet simple. If you cant disable it, try to prevent it from starting in the first place under a condition that fits your needs. :-)

<script>
    if ($(window).width() > 769) { $('#zoom').elevateZoom(); }
</script>

It just overlays a zooming div, so if you are temporarily seeking to disable it, just hide that overlaying window and then show it again later.

// Get rid of it
$('.zoomWindowContainer').hide();

// Return it later
$('.zoomWindowContainer').show();

Worked in my instance at least.