Zamień obraz src z jquery

Question

Mam jeden duży obraz i małe kciuki, próbuję zamienić ich src ze sobą. Tutaj zmieniam kciuk img w bottleWrapper img, ale chcę zamienić ich src. Pls pomóż!

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

Dzięki wszystkim :)

I rzeczywiście zapomniałem dać się jedna informacja, że ​​mam różne kciuki, to odpowiedź pasuje najlepiej! Dziękuję wszystkim za wasz cenny wkład!

$('.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 1

Do SWAP obrazy lubię:

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

Jeśli masz kilka 'galerie' zrobić jak: http://jsbin.com/asixuj/5/edit

Answer 2

Spróbuj:

$('.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'); 
    }); 
}); 

Należy dołączyć kliknij wydarzenia img tagów wewnątrz thumbs klasy, a następnie zmienić źródło obrazu.

Answer 3

Ther ma <a> tag w swojej pytanie .. również zakładając jego img .. na cl ick kciuki img .. the bottlesWrapper dostanie zamienione ..

spróbować tej

aktualizowane

$('.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'); 
    }); 

}); 

UWAGA, i nie trzeba each pętli ... jQuery dawkę że przy użyciu selektora klasy działa ..

Answer 4

Ponieważ nie masz znacznika <a> w .thumb Twój kod nie działa w ogóle, zamiast kliknij samego .thumb:

$('.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'); 
    }); 
    }); 
}); 

I .thumb jest sam w sobie jest zbiorem więc nie trzeba wykonać iterację .each() metody.