I’m using a beautiful image zoom plugin called Cloud Zoom. One feature of the plugin is that it can allow for a thumbnail gallery next to the main image. When a thumb is clicked, the main image is swapped out.
The plugin requires three image sizes, per image in the gallery. Large, small and thumb.
I’m looking to retrieve the LARGE image source of the current SMALL image, after it gets swapped. I’d like to provide a link to the current LARGE image, so the user can see it in a new browser tab. If I could get my hands on the current source, then I could swap out the image link when the small image is swapped.
Here is a link to my product detail page.
Here is the code in the plugin that mentions the gallery (cloud-zoom.1.0.2.js - line 356):
} else if ($(this).is('.cloud-zoom-gallery')) {
opts = $.extend({}, relOpts, options);
$(this).data('relOpts', opts);
$(this).bind('click', $(this), function (event) {
var data = event.data.data('relOpts');
// Destroy the previous zoom
$('#' + data.useZoom).data('zoom').destroy();
// Change the biglink to point to the new big image.
$('#' + data.useZoom).attr('href', event.data.attr('href'));
// Change the small image to point to the new small image.
$('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);
// Init a new zoom with the new images.
$('#' + event.data.data('relOpts').useZoom).CloudZoom();
return false;
});
}
Any suggestions on how get the current img src?