首页 \ 问答 \ 如何在JQuery脚本中取消绑定JQZOOM?(How can I unbind JQZOOM in my JQuery Script?)

如何在JQuery脚本中取消绑定JQZOOM?(How can I unbind JQZOOM in my JQuery Script?)

我现在有这个脚本,当缩略图被更改时会更改图像。 然后我想将JQZOOM添加到新图像中。 但是,如果我把它放在Onclick事件中,它点击它的次数越来越慢......我想因为它运行了多个实例。

无论如何解除JQZOOM的某些东西然后重新绑定到别的东西?

这是我的jquery:

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

});

如果有人可以帮助我,请提前致谢。

干杯!


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!


原文:https://stackoverflow.com/questions/2334696
更新时间:2021-10-10 21:10

最满意答案

这可以按如下方式完成:

修改其他鼠标功能所在的jqzoom1.0.1.js(第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();
});

按如下方式调用缩放器:

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

});

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

});

相关问答

更多

最新问答

更多
  • 如何避免iPhone应用程序泄漏?(How to avoid leaking in iPhone application?)
  • Rails引擎:在哪里定义仅用于测试的gems(Rails Engines: Where to define gems only used in testing)
  • 如何在android中的texviews中随机设置文本?(How to randomly settext in textviews in Android?)
  • PHP函数 - 用.00清理数字(PHP Function - cleaning up numbers with .00)
  • 如何在WPF中数据绑定到IGrouping?(How do I databind to a IGrouping in WPF?)
  • 在更新语句中增加时是否存在并发问题[复制](Are there concurrency issues when incrementing in update statement [duplicate])
  • RabbitMQ与NodeJS Addon for C ++应用程序集成(RabbitMQ vs NodeJS Addon for C++ Application Integration)
  • 使用CoreData执行乘法(聚合):如何?(Performing multiplication (aggregation) with CoreData: how to?)
  • 如何在Android中按位置显示Listview中的项目(How to display Item from a Listview by position in Android)
  • 无效的命令ProxyRequests设置jenkins时(Invalid command ProxyRequests when setting up jenkins)
  • C#,MySQL - 从表中检索行并在方法中填充变量,然后将Add()方法填充到List <>(C#, MySQL - Retrieve row from table and populate variables in method then Add() method to List<>)
  • 如何从内部拒绝承诺功能(How to reject a promise from inside then function)
  • javadoc for String [] args(javadoc for String[] args)
  • Laravel格式查询json结果(Laravel format query json result)
  • ImageIO - 从加载的图像中获取图像宽度和高度(ImageIO - get image Width and Height from loaded image)
  • 如何在Windows 7中批量重命名文件名,以便它们在结尾处具有数字顺序?(How do I batch-rename filenames in windows 7, so that they have numerical order at the end of them?)
  • 限制用户在Apple应用商店中撰写有关该应用的评论(Restrict user to write review about the app at Apple app store)
  • 亚马逊Kindle Fire中的java.lang.OutOfMemoryError(java.lang.OutOfMemoryError in Amazon Kindle Fire)
  • 如何使用C#在python中将字符串作为命令行参数传递(How to pass string as command line argument in python using C#)
  • 发生操作时使用ngrx-effect调用服务(Use ngrx-effect to call a service when an action occurs)
  • 在Android应用程序中集成所有社交资源(Integrating All Social Feeds In an Android App)
  • 哪些对象需要产前诊断?
  • 在React模板渲染上调用函数(Call function on React template render)
  • 如何将图标添加到SlidingTabLayout?(How to add Icons to SlidingTabLayout?)
  • 根据给定的数字数组创建一个几乎唯一的标识符(Create an almost unique identifier based on a given array of numbers)
  • 使用样式标签更改鼠标上方的文本颜色(Change text color on mouse over using the style tag)
  • Ruby String#{}不起作用(Ruby String #{} doesn't work)
  • 字符串和指针(Strings and pointers)
  • 中小学教师信息技术应用能力提升全员培训要求教师每五年不少于学时的培训标
  • 无法传递函数值来设置数组大小C ++(Can't pass a function value to set an array size C++)