Switch image src on click

Question

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?

chaos · Accepted Answer · 2009-09-03 16:46:31Z

2

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

answered Sep 3, 2009 at 16:46

chaos

125k34 gold badges306 silver badges310 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tarik Over a year ago

The difference between this answer and my answer is actually ">" character in the selector. > means select this direct children instead of all the descendants which means in my example only child imgs will be selected rather than all of descendants.

Sampson Over a year ago

While that is true, Aaron, I don't suspect #big_picture to hold more than a single IMG as its child, based on the ID being singular.

Sampson · Accepted Answer · 2009-09-03 16:52:19Z

1

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

edited Sep 3, 2009 at 16:52

answered Sep 3, 2009 at 16:46

Sampson

269k76 gold badges546 silver badges570 bronze badges

1 Comment

user39980 Over a year ago

What do you recomend if i want to say add some text to the full size image meaning image-name-full.jpg, to show the large images, then have thumbnails.

Tarik · Accepted Answer · 2009-09-03 16:48:38Z

0

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

you can use this function in thumbnail onclick event.

edited Sep 3, 2009 at 16:48

answered Sep 3, 2009 at 16:47

Tarik

82.2k86 gold badges243 silver badges351 bronze badges

Collectives™ on Stack Overflow

Switch image src on click

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related