Swapping Images

[jasonmwhitaker]

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:

<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:

$(".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.

[Old Pedant]

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.

[jasonmwhitaker]

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!

[Old Pedant]

<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?

[jasonmwhitaker]

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).

[jasonmwhitaker]

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.

[Old Pedant]

Remember, I'm doing this "blind", so can't tell if it's working.

I *THINK* you then want this:

<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.

[jasonmwhitaker]

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!