2

我试过取消绑定并重新绑定 jqzoom,如下所示:

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

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

但是什么都没发生。任何人都可以帮助我如何做到这一点?

链接: http: //www.mind-projects.it/projects/jqzoom/

4

4 回答 4

3

尝试

$.jqzoom.disable('.jqzoom')

接着

$.jqzoom.enable('.jqzoom')

正如jquery.jqzoom-core.js文件的解压缩源代码中所建议的那样,行686

于 2012-06-13T10:31:34.633 回答
2

jQzoom 没有办法做到这一点,但这没关系,因为你总是可以自己做到这一点。

与任何其他 jQuery 插件一样,该过程是相同的。所有 jquery 插件基本上都做同样的事情。首先,他们将一些数据与元素相关联。假设您有这样的图像。

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

并且您也有小图像,您可以单击并更改大图像。例如,您有产品的大图像和同一产品的其他一些不同角度的小图像。这些是小图像。

<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>

既然你这样调用 jqzoom

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

然后你需要像这样删除数据:

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

但这还不够,因为您仍然有绑定到需要删除的元素的事件侦听器,否则您将无法在同一元素上重新启用 jqzoom。以下是您的操作方法 (不带参数的 unbind() 会删除所有事件侦听器。)

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();

最后,我们需要通过在其中添加一些其他元素来恢复 jqzoom 更改的原始元素内容。

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

上面的代码所做的是克隆里面的图像,并用我们调用 jqzoom 之前的图像替换“ zoom_link ”元素的全部内容。在此之后,您可以再次调用 jqzoom 并且它将起作用。

jQuery('.zoom_link').jqzoom({'preloadImages':true, zoomType: 'innerzoom' });  
于 2013-12-21T21:58:21.017 回答
1
$('.jqzoom').removeData('jqzoom');

为我工作。

于 2012-10-15T06:05:20.953 回答
1

removeData如果您在使用或disable禁用 jqzoom时遇到问题,您可以试试这个:

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

事实上,在 jquery.jqzoom-core.js 的第 686 行下,你会发现这两个方法:

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

希望对您有所帮助!

于 2013-08-22T17:04:37.583 回答