How to disable elevateZoom?

Question

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

Answer 1

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!

Answer 2

A much better solution is in-built into elevatezoom:

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

Answer 3

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>