CODEWITHSUNDEEP
jqueryimageswapattrsrc
itsMe
itsMe

Reputation: 633

Swap image src with jquery

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;
    });
});

Upvotes: 7

Views: 37305

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

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

Upvotes: 6

Jai
Jai

Reputation: 74738

As you don't have a <a> tag in the .thumb your code won't work at all, instead try clicking the .thumb itself:

$('.thumbs').click(function() {
    var thumbsimgSrc = $(this).find("img").attr('src');
    var bottleImgSrc = $('.bottlesWrapper img').attr('src');

    $(this).find("img").attr('src', bottleImgSrc);

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

And .thumb is itself is a collection so you don't need to iterate through .each() method.

Upvotes: 1

Anujith
Anujith

Reputation: 9370

Try:

$('.thumbs img').click(function() {
    var img_src = img.attr('src');

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

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

You should attach click events to img tags inside thumbs class and then change the image source.

Upvotes: 1

bipen
bipen

Reputation: 36531

ther is no <a> tag in your question ..so assuming its img.. on click of thumbs img.. the bottlesWrapper will get swaped..

try this

updated

 $('.thumbs img').click(function() {
   var img=$(this).attr('src');

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

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

});

NOTE: and you don't need each loop ... jquery dose that by using a class selector works..

Upvotes: 3

Related Questions