dynamically adding image src using javascript

Question

I am trying to add an image src into an image in div on click of a thumbnail. The problem is that the image src do not change when another thumnail is clicked.

HTML Code is:

  <a class="thumbnail" href="#" >
     <img  src="img1">
     <img  src="img2">
     <img  src="img3">
  </a>



 <div  class="imageforthumb">
    <img class="imageforthumbs">
 </div>

Javascript im using is:

$('.thumbnail').click(function () {
var images = $('.thumbnail img').attr('src');
$(".imageforthumbs").attr('src', images)
});

once i click the first image img1, it is set to img1 and do not change to img2 when i click the thumbnail. Please advice what could be wrong here ?

Jamiec · Accepted Answer · 2014-04-16 13:32:20Z

2

With this line:

var images = $('.thumbnail img').attr('src');

You're always getting the first image's src.

Change your code to:

$('.thumbnail img').click(function () {
    var images = $(this).attr('src');
    $(".imageforthumbs").attr('src', images)
});

Live example: http://jsfiddle.net/8hTrr/

Edit: As pointed out, you dont need jQuery to get the attr, you just need:

$('.thumbnail img').click(function () {
     $(".imageforthumbs").attr('src', this.src)
});

Updated example: http://jsfiddle.net/8hTrr/1/

edited Apr 16, 2014 at 13:32

answered Apr 16, 2014 at 13:25

Jamiec

136k15 gold badges142 silver badges202 bronze badges

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

Comments

War10ck · Accepted Answer · 2014-04-16 13:27:09Z

0

Delegate the event to each image within the <a></a> tag. Then bind the src of the clicked <img />.

$('.thumbnail').on('click', 'img', function () {
    $(".imageforthumbs")[0].src = this.src;
});

answered Apr 16, 2014 at 13:27

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

Comments

collapsar · Accepted Answer · 2014-04-16 13:25:41Z

-1

your js code is incorrect. try

$('.thumbnail').click(function (eve) {
    $(".imageforthumbs").attr('src', $(eve.target).attr('src'));
});

answered Apr 16, 2014 at 13:25

collapsar

17.4k5 gold badges40 silver badges66 bronze badges

2 Comments

collapsar Over a year ago

ha, another race condition ;-). if this solution caters for your needs, accept Jamiec's conceptually identical answer which was submitted a few moments before mine.

user3541362 Over a year ago

Thanks very much. That work with slight addition of 'img' in front of .thumbnail $('.thumbnail img').click(function () { $(".imageforthumbs").attr('src', $(this).attr('src')); });

Collectives™ on Stack Overflow

dynamically adding image src using javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related