Swap image src with jquery

Question

У меня есть одно большое изображение и маленькие большие пальцы, я пытаюсь обменять их src друг на друга. Здесь я изменяю палец img в flashWrapper img, но я хочу обменять их src. Помощь Pls!

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

Спасибо всем :)

Я на самом деле забыл дать одну информацию, которая у меня есть различные пальцы, это ответ подходит лучше всего! Спасибо всем за ваши драгоценные вклады!

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

К SWAP изображения действительно нравится:

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

Если у вас есть несколько 'галерей' делать, как: http://jsbin.com/asixuj/5/edit

Answer 2

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

Вы должны приложить нажмите события img тегов внутри thumbs класса, а затем изменить источник изображения.

Answer 3

Ther не <a> тег в вопрос .. и при условии его img .. на cl Ик тумб IMG .. bottlesWrapper получит swaped ..

попробовать этот

обновленный

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

}); 

ПРИМЕЧАНИЕ: и вам не нужно each петли ... JQuery дозы что при использовании селекторов классов работает.

Answer 4

Поскольку у вас нет метки <a> в .thumb Ваш код не будет работать на всех, а попробуйте нажать сам .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'); 
    }); 
    }); 
}); 

И .thumb сама коллекция, поэтому вам не нужно перебирать .each() метода.