Question

I would like to replace images on click but also have the replaced image click to a lightbox. Here is my example where the first image has the lightbox: http://www.artdesigngroup.co/products/test.html

My thought is that I need to apply the “display” ID on the surrounding div and replace the images within this div. But how do I do this and create the lightbox?

Thank You.

Answer 1

I would rethink your structure for handling this. Most of what you are doing can be handled with straight jQuery instead of rolling your own swap functions. When you ask your questions, including a Fiddle is a great way to get an answer faster. Note that I am using jQuery 1.7’s prop method here which you should be using instead of attr.

http://jsfiddle.net/txbqX/3/

jQuery to get what you want

//when main image is clicked, show it in colorbox
$('#foo a').colorbox();

//when thumb is clicked, set main image to it
$('div#thumbs img').click( function() {
    $('#foo a').prop('href', $(this).prop('src'));
    $('#foo img').prop('src', $(this).prop('src'));
    return false;  //stop link from navigating
})

Simplified HTML

<div id="foo" > 
    <a href="http://www.artdesigngroup.co/images/tv-frames/01.jpg">
        <img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="304" height="304" name="Display" id="display"  />
    </a>
</div>

<br />
<div id="thumbs">
    <img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="56" height="56" />
    <img src="http://www.artdesigngroup.co/images/tv-frames/02.jpg" width="56" height="56" />
    <img src="http://www.artdesigngroup.co/images/tv-frames/03.jpg" width="56" height="56" />
    <img src="http://www.artdesigngroup.co/images/tv-frames/04.jpg" width="56" height="56" />
    <img src="http://www.artdesigngroup.co/images/tv-frames/05.jpg" width="56" height="56" />
</div>