Reputation: 1665

how can i unbind and rebind jqzoom

I've tried unbind and rebind jqzoom as shown below:

$('.jqzoom').unbind(); 

$('.jqzoom').jqzoom(options);

But nothing has happened. can any please help me how to do this?

Link : http://www.mind-projects.it/projects/jqzoom/

Upvotes: 2

Answers (4)

user3126146

Reputation: 21

jQzoom does not have a way to do this but that does not matter, because you can always do that youself.

As with any other jQuery plugins the procedure is the same. All jquery plugins basically do the same thing. First they associate some data with the element. Lets say you have an image like this.

<a class="zoom_link"><img id="product_thumb_image" src="...link to image..." /></a>

and you also have small images that you can click and change the big image. For example you have a big image of the product and some other small images of the same product from different angles. These are the small images.

<div id="small_images">

<a href="javascript:void(0)" rel="{gallery:'gal402', smallimage:'i1.jpg',  largeimage:'l1.jpg'}">
<img src="i1.jpg" />
</a>
<a href="javascript:void(0)" rel="{gallery:'gal402', smallimage:'i2.jpg',  largeimage:'l2.jpg'}">
<img src="i2.jpg" />
</a>


</div>

Since you call jqzoom like this

jQuery('.zoom_link').jqzoom({'preloadImages':true, zoomType: 'innerzoom' });

Then you will need to remove the data like this:

jQuery('.zoom_link').removeData('jqzoom')

But that's not enough because you still have event listeners bound to elements that you need to remove, otherwise you will not be able to re-enable jqzoom on the same element. Here is how you do that ( unbind() without parameters removes all event listeners. )

jQuery('.zoom_link').unbind();
/* These are the elements that jqzoom created */
jQuery('.zoomPad').unbind();
jQuery('.zoomPup').unbind();


/* For small images */
jQuery('#small_images').find('img').unbind();
jQuery('#small_images').find('a').unbind();

and finally we need to restore the original element contents that jqzoom altered by adding some other elements inside.

i = jQuery('.product_thumb_image').clone();
jQuery('.zoom_link').html( i.prop('outerHTML') );

What the above code does is cloning the image inside and replacing entire contents of the "zoom_link" element with the image like it was before we called jqzoom. After this you can call jqzoom again and it will work.

jQuery('.zoom_link').jqzoom({'preloadImages':true, zoomType: 'innerzoom' });

Upvotes: 2

JoDev

Reputation: 6873

If you encountered some trouble using removeData or disable for disabling jqzoom, you can try this :

$('.jqzoom').data('jqzoom').disable();

In fact, under line 686 of jquery.jqzoom-core.js, you will find this two methods :

 disable: function (el) {
        var api = $(el).data('jqzoom');
        api.disable();
        return false;
    },
    enable: function (el) {
        var api = $(el).data('jqzoom');
        api.enable();
        return false;
    },

Hope it will help you!

Upvotes: 1