Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Swapping Images

  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Swapping Images

    Hello, all. I have a common problem, but despite my research I have been unable to find a solution that works for my situation.

    I have a large image and several thumbnails below it. I am working with a content management system, so I am able to edit the output of the anchor text around the image, the divs around the image, but NOT the actual image string itself.

    The images do have some classes built into them, but no IDs.

    Anyways, I want the main image source to change based on the href of the thumbnail below. So if you click on any one of the thumbs, the href for that thumbnail populates as the source for the main image.

    Here is my code so far:

    Code:
    <div class="images" id="big-image">
    <a href="dianaminiflash_shop0001-11.jpg">
    <img width="500" height="500" src="dianaminiflash_shop0001-11-500x500.jpg" class="attachment-shop_single wp-post-image" /></a>
    <div class="thumbnails">
    <a href="dianamini_en-rose_front1.jpg" title="dianamini_en-rose_front" rel="thumbnails" class="product-thumb first">
    <img src="dianamini_en-rose_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a>
    <a href="diana-mini_fern-green_front1.jpg" class="product-thumb ">
    <imgsrc="diana-mini_fern-green_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a>
    <a href="diana-mini_flashkit_white_front1.jpg" class="product-thumb last">
    <img src="diana-mini_flashkit_white_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a>
    </div>
    </div>
    One of the things I've tried that has not worked but has been offered up as a solution on this forum and others is:

    Code:
    $(".thumbnails a").click( function() {
    var changeSrc = $(this).attr("href");
    $(".attachment-shop_single").attr("src", changeSrc);
    return false;
    });
    Any suggestions on what I'm doing wrong here? I really appreciate the help in advance.
    Last edited by jasonmwhitaker; 11-08-2011 at 07:44 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    I can easily do it in vanilla JavaScript, but I don't use jQuery. If you need a jQuery answer, you probably should post in the jQuery forum.

    FWIW, the code you show there looks at least close to right for jQuery, to me.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Vanilla JS would work just fine for me. I don't need to use JQuery, it's just the answer I've seen posted for instances in which you needed to refer to classes instead of IDs.

    Thanks!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Code:
    <script type="text/javascript">
    
    var thumbs = null; // will hold ref to the div class="thumbnails"
    
    function setup( )
    {
    
        // we can't use getElementsByClassName becuz MSIE 7 & 8 don't support it
        // so we do it the long way...
        var divs = document.getElementsByTagName("div");
        for ( var d = 0; d < divs.length; ++d )
        {
            if ( divs[d].className == "thumbnails" )
            {
                thumbs = divs[d];
                break; // out of loop
            }
        }
        if  ( thumbs == null ) return; // oops?  couldn't find it?  give up
    
        var links = thumbs.getElementsByTagName("a");
        for ( var i = 0; i < links.length; ++i )
        {
            var link = links[i];
            link.onclick = function() { return thumbClick(this); }
        }
    }
    
    function thumbClick( link )
    {
        var div = document.getElementById("big-image");
        var image = div.getElementsByTagName("img")[0];
        image.src = link.href;
    }
    
    window.onload = setup;
    </script>
    This won't change the href of the <a> around the big image.

    But I don't know what you would want to change it to. The pattern for the big image that is there initially doesn't work for the thumbs.

    Unless you also have images named dianamini_en-rose_front1-500x500.jpg, etc.?? That is you have three size of each image? 200x200, 500x500 and full size?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks, I'm going to try this now!

    And yes, I do have larger image versions of every image (they're all dynamically created when I upload the images to WordPress).

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Alright, everything worked perfectly, except for some reason the return false statement in my onclick wasn't working so it was still trying to load the href from the thumbnail. I added a return false statement to the thumbClick function and it works!

    Thank you, thank you, thank you. Javascript programmers are seriously a far more intelligent breed than we server side only programmers.
    Last edited by jasonmwhitaker; 11-08-2011 at 09:19 PM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Remember, I'm doing this "blind", so can't tell if it's working.

    I *THINK* you then want this:
    Code:
    <script type="text/javascript">
    
    var thumbs = null; // will hold ref to the div class="thumbnails"
    
    function setup( )
    {
    
        // we can't use getElementsByClassName becuz MSIE 7 & 8 don't support it
        // so we do it the long way...
        var divs = document.getElementsByTagName("div");
        for ( var d = 0; d < divs.length; ++d )
        {
            if ( divs[d].className == "thumbnails" )
            {
                thumbs = divs[d];
                break; // out of loop
            }
        }
        if  ( thumbs == null ) return; // oops?  couldn't find it?  give up
    
        var links = thumbs.getElementsByTagName("a");
        for ( var i = 0; i < links.length; ++i )
        {
            var link = links[i];
            link.onclick = function() { return thumbClick(this); }
        }
    }
    
    function thumbClick( link )
    {
        var div = document.getElementById("big-image");
        var mainlink = div.getElementsByTagName("a")[0];
        mainlink.href = link.href;
    
        var image = div.getElementsByTagName("img")[0];
        image.src = link.href.replace(".jpg", "-500x500.jpg");
    }
    
    window.onload = setup;
    </script>
    I'm assuming that when the thumbnail is enlarged to the big image, the 200x200 becomes 500x500 and the HREF in the main <a> tag gets the URL of the <a> for the clicked on thumbnail.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jasonmwhitaker (11-08-2011)

  • #8
    New Coder
    Join Date
    Nov 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    For running blind, you're last mod nailed it. There's nothing left to be done here, you solved it for me!

    Thanks again for all your help!


  •  

    Posting Permissions

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