Swap image src with jquery

itsMe picture itsMe · Mar 29, 2013 · Viewed 35.2k times · Source

I have one big image and small thumbs, i am trying to swap their src with each other. Here i am changing thumb img in bottleWrapper img, but i want to swap their src. Pls help!

HTML

<div class="bottlesWrapper">
  <img src="bottle1.png" />
</div>

<div class="thumbs">
   <img src="bottle2.png" />
</div>

SCRIPT

<script>
$('.thumbs a').each(function() {
    $(this).click(function() {
       var aimg = $(this).find("img")

      $('.bottlesWrapper img').fadeOut('fast',function(){
         $(this).attr('src', $(aimg).attr('src')).fadeIn('fast');
      });

    });
});
</script>

EDIT

Thanks all :)

I actually forgot to give out one information that I have various thumbs, this answer suits best! Thank you all for your precious inputs!

$('.thumbs img').click(function() {
    var thmb = this;
    var src = this.src;
    $('.bottlesWrapper img').fadeOut(400,function(){
        thmb.src = this.src;
        $(this).fadeIn(400)[0].src = src;
    });
});

Answer

Roko C. Buljan picture Roko C. Buljan · Mar 29, 2013

To SWAP images do like:

LIVE DEMO

$('.thumbs img').click(function() {
    var thmb = this;
    var src = this.src;
    $('.bottlesWrapper img').fadeOut(400,function(){
        thmb.src = this.src;
        $(this).fadeIn(400)[0].src = src;
    });
});

If you have multiple 'galleries' do like: http://jsbin.com/asixuj/5/edit