SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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):
    Code JavaScript:
    } 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?

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like you have access to the large image location from event.data already, so you might try something like this:

    Code JavaScript:
    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....
    Last edited by raw10; Feb 22, 2012 at 14:31. Reason: Changed to JS highlighter from basic CODE block

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YES!!!

    Thank you, thank you, thank you.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked!

  5. #5
    SitePoint Member
    Join Date
    May 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question advancing images on big image click

    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •