开发者

How can I unbind JQZOOM in my JQuery Script?

开发者 https://www.devze.com 2022-12-21 18:36 出处:网络
I have this script at the moment, which changes an image when a thumbnail has been changed. I then want JQZOOM to be added to that new image. However, if I put it inside the Onclick event, it gets slo

I have this script at the moment, which changes an image when a thumbnail has been changed. I then want JQZOOM to be added to that new image. However, if I put it inside the Onclick event, it gets slower and slower the more times you click on it... I guess because its running multiple instances.

Is there anyway to unbind the JQZOOM from something then rebind it to something else?

Here is my jquery at the moment:

var options = {
    zoomWidth: 400,
    zoomHeight: 325,
    xOffset: 25,
    yOffset: 0,
    position: "right",
    lens: true,
    zoomType: "reverse",
    imageOpacity: 0.5,
    showEffect: "fadein",
    hideEffect: "fadeout",
    fadeinSpeed: "medium",
    title: false
};

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

$('.single-zoom-image').click ( 开发者_运维知识库function () {

    $('#bigProductImage').attr("src", $(this).attr("zoom"));
    $('.jqzoom').attr("href", $(this).attr("extrazoom"));

});

Thanks in advance if anyone can help me.

Cheers!


This can be done as follows:

Modify jqzoom1.0.1.js where the other mouse functions are (around line 90)

//Handle clicked thumbnails changing the zoomed image
$(this).bind('changeimage', function(){
   smallimage = new Smallimage( $("img", this) );
   largeimage = new Largeimage(a[0].href);
    smallimage.loadimage();
});

Call the zoomer as follows:

$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 200,
xOffset: 30,
yOffset: 0,
position: 'right',
title: false,
showPreload: false
};

//Handle clicking on the thumbnails, swap the mainimage and recycle the zoomer
$('.seemore').bind('click', function(e) {
    e.preventDefault();
    $('.jssProductFullImage').attr('src', $(this).attr('href'));
    $('.zoomer').attr('href', $(this).attr('href') );
    //Recall the zoomer to update the page
    $('.zoomer').trigger('changeimage');

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

});


$('.jqzoom').removeData('jqzoom');

Did the job for me.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号