I'm using the Jqzoom Plugin to zoom images on my web site.Unfortunately after the Image change, the zoomed image is not moveable anymore. I can only see the top of the image in the zoom window. But when I move the mouse down, nothing happens. here is my Productthumbimage COde:
ProductTinyImage Code:
one thing that i know is in my Rel attributes "smallimage": "%%GLOBAL_ProductThumbImageURL%%", "largeimage": "%%GLOBAL_ProductZoomImageURL%%" are empty, i don't now why..Does anyone know, what I did wrong?
Small and large image urls are empty
here is my head Script.
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'innerzoom',
preloadImages: false,
alwaysOn:false
});
});
</script>
i downloaded the plugin from here "www.mind-projects.it"
here is my Product page URl: http://www.angeljackets.co.uk/products/Emma-Swan-Once-Upon-A-Time-Leather-Jacket.html
You probably need to rebind the plugin when you switch the image.
Inside showProductThumbImage
in product.functions.js , add the jqZoom script at the bottom of the function.
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
});
}
If that works, you may want to look at unbinding jqZoom, and add that before you rebind it above. It's always a good idea to unbind stuff before you rebind it again. Here's a couple of links on the subject:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.