Question

Does anyone have an example of a jquery based photo selector? This is something you see in small photo albums.

I have the following code:

<div><img class="bigpicture" src="1.jpg"></img></div>
<div>
    <img class="smallpicture" src="1.jpg"></img>
    <img class="smallpicture" src="2.jpg"></img>
    <img class="smallpicture" src="3.jpg"></img>
    <img class="smallpicture" src="4.jpg"></img>
    <img class="smallpicture" src="5.jpg"></img>
    <img class="smallpicture" src="6.jpg"></img>
</div>

The behavior I’m looking for is when the users hovers over any of the smaller pictures, it updates the bigger picture with the one that was just hovered.

Any thoughts?

Thanks

Answer 1

Using jQuery:

$('.smallpicture').hover(function() {
    $('.bigpicture').attr('src', $(this).attr('src'));
});