jquery picture selector

Does a开发者_如何学编程nyone 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

---

$('.smallpicture').hover(function(){
   $('.bigpicture').attr('src', $(this).attr('src')+"?timestamp=" + new Date().getTime());
});

timestamp is needed to dynamically update your big image.

---

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

---

Using jQuery:

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