Switch image src on click

Question

Hey,

I have a jquery scroller i made with thumbnails and I am trying to create a mini script.

When a user clicks on the thumb nail, it updates code like this:

<div id="big_image">
    <img src="HERE.jpg" alt="my image"/>
</div

So when you click a thumbnail on the scroller it updates the SRC of the IMG tag on the page? Any ideas how I can get started?

Thanks,

Ryan

Answer 1

$('#scroller img').click(function() {
    $('#big_image img').attr('src', whatever_full_size_image_src_is_for(this));
}

Answer 2

// Replace larger image with src of whatever thumbnail you clicked
$("img.myImage").click(function(){
  $("img.bigImage").attr("src", $(this).attr("src"));
});

Note, unless you're crushing large images into thumbnail sizes, this won't be a very elegant solution to your problem. And in all honesty, if you are crushing large images into thumbnail sizes, that also isn't a very good solution.

Answer 3

 function updateImage()
 { 
   $("#big_image > img").attr("src","imagePath"); 
 }

you can use this function in thumbnail onclick event.