Exchaning one src attribute with another src attribute via jQuery

Question

I have to images and I'd like to switch the src attributes of the images, when one is clicked:

Before:

<img src="1.jpg" class="image1" />
<img src="2.jpg" class="image2" />

After clicking on image 1 or 2:

<img src="2.jpg" class="image1" />
<img src="1.jpg" class="image2" />

I can change the src of the clicked image, but I don't seem to be able to store the original src-attribute in any way to pass it to the other image.

Thanks!

Of course this is just an excerpt. It's an image-gallery. The first image is shown big, when you click on a thumbnail, the thumbnail is shown instead of the big image. So what to do to see the first pic again? I need to store the src for the big image somewhere (by exchanging the two images). — Arerrac
– Arerrac, Commented Oct 2, 2012 at 10:48

zerkms · Accepted Answer · 2012-10-02 10:12:45Z

2

You won't believe but you can store it in a 3rd variable!!

var img1 = $('.image1'),
    img2 = $('.image2');

var originalSrc = img1.attr('src');

img1.attr('src', img2.attr('src'));
img2.attr('src', originalSrc);

answered Oct 2, 2012 at 10:12

zerkms

256k73 gold badges447 silver badges551 bronze badges

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

3 Comments

Arerrac Over a year ago

That's what I tried, my code:

$('.image1').click(function() { orgSource = $(this).attr("src); alert(orgSource); $(this).parents(".node").find(".image2").attr("src", orgSource);

...gives me TWO alerts, one with the first and one with the second src...

zerkms Over a year ago

@user1632757: reproduce that on jsfiddle.net

bestfriendsforever Over a year ago

Thanks for this answer! I know this is pretty basic but it was a bit of a revelation!

Man Programmer · Accepted Answer · 2012-10-02 10:12:44Z

0

$('#Id').click(function(){
$('.image1').attr('src','2.jpg');
$('.image2').attr('src','1.jpg');
});

answered Oct 2, 2012 at 10:12

Man Programmer

5,3662 gold badges24 silver badges21 bronze badges

Comments

Nelson Benítez León · Accepted Answer · 2012-10-02 10:17:31Z

0

You can do it the following way:

$('.image1 , .image2').click(function() {
   if ($(this).prev().length) {
      temp = $(this).attr('src');
      $(this).attr('src', $(this).prev().attr('src') );
      $(this).prev().attr('src',temp);
   } else {
      temp = $(this).attr('src');
      $(this).attr('src', $(this).next().attr('src') );
      $(this).next().attr('src',temp);
   }
});

answered Oct 2, 2012 at 10:17

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Comments

Rob Angelier · Accepted Answer · 2012-10-02 10:19:13Z

0

You could do the following with jQuery. More info can be found here:

http://jquery.com

<script type="text/javascript" src="jquery-1.8.0">
$(function(){
  $("img").click(function(){
   $(this).closest("img").attr("src",$(this).attr("src"));
  });
});
</script>

Hope this helps you out.

edited Oct 2, 2012 at 10:19

answered Oct 2, 2012 at 10:13

Rob Angelier

2,33316 silver badges29 bronze badges

Collectives™ on Stack Overflow

Exchaning one src attribute with another src attribute via jQuery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related