Swapping images: how to retrieve the current img src

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?

Looks like you have access to the large image location from event.data already, so you might try something like this:


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

// NEW. Update image link to point to the new big image.
$('span.fullzoom a').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;

See if that works for you…

YES!!!

Thank you, thank you, thank you.

Glad it worked!

I have a similar, yet different question (hehe).

I’m using cloud zoom as a basic image gallery and have removed the zoom function (long story, but it’s functioning). I’m now looking to have the images advance when you click the large image, not just the thumbnails (right now I have absolutely nothing happen on clicking the large image).

Here’s an example product page.

If anyone has any thoughts on getting the images to advance by clicking the large image, it would be much appreciated!