javascript - jQZoom : innerzoom issue

Question

我正在使用 Jqzoom 插件缩放网站上的图像。不幸的是，图像更改后，缩放的图像不再可移动。我只能在缩放窗口中看到图像的顶部。但是当我向下移动鼠标时，什么也没有发生。这是我的产品缩略图代码:

ProductTinyImage 代码:

我知道的一件事是在我的Rel属性中“smallimage”:“%%GLOBAL_ProductThumbImageURL%%”，“largeimage”:“%%GLOBAL_ProductZoomImageURL%%”是空的，我现在不知道为什么..有谁知道，我做错了什么？

Small and large image urls are empty

这是我的头部脚本。

$(document).ready(function() {
    $('.jqzoom').jqzoom({
            zoomType: 'innerzoom',
            preloadImages: false,
            alwaysOn:false
        });
});


</script>

我从这里“www.mind-projects.it”下载了插件

这是我的产品页面 URl: http://www.angeljackets.co.uk/products/Emma-Swan-Once-Upon-A-Time-Leather-Jacket.html

Answer 1

切换图片时，您可能需要重新绑定(bind)插件。

在 product.functions.js 中的 showProductThumbImage 内，在函数底部添加 jqZoom 脚本。

function showProductThumbImage(ThumbIndex) {
    $('.ProductThumbImage img').attr('src', ThumbURLs[ThumbIndex]);
    $('.ProductThumbImage img').attr('alt', ProductImageDescriptions[ThumbIndex]);


    CurrentProdThumbImage = ThumbIndex;
    ShowVariationThumb = false;
    highlightProductTinyImage(ThumbIndex);
    if (ShowImageZoomer) {
        $('.ProductThumbImage a').attr("href", ZoomImageURLs[ThumbIndex]);
        $('.ProductThumbImage a').css({
            'cursor': 'pointer'
        });
    }

    $('.jqzoom').jqzoom({
        zoomType: 'innerzoom',
        preloadImages: false,
        alwaysOn: false
    });
}

如果有效，您可能需要查看取消绑定(bind) jqZoom，并在上面重新绑定(bind)之前添加它。在再次重新绑定(bind)之前解除绑定(bind)总是一个好主意。以下是有关该主题的几个链接:

How can I unbind JQZOOM in my JQuery Script?

how can i unbind and rebind jqzoom