Показать изображение в большом DIV щелкать изображение в небольшом DIV

Question

HTML:

<div class="blowup"> 
<img src="images/products/3.jpg" alt="even Men Black Slim Fit Nehru Jacket"> 
</div> 

<div class="thumbs-container"> 
<img src="images/products/1.jpg"> 
<img src="images/products/2.jpg"> 
</div> 

У меня есть два div с. .blowup большой, тогда как в .thumbs-container небольшие.

Мне нужно показать изображение в .thumbs-container в .blowup при щелчке маленького изображения. Как я могу это сделать с помощью JQuery?

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.thumbs-container img').click(function(){ 

Что следует добавить здесь?

 }); 
    }); 
</script> 

Answer 1

Вы можете получить ГКЗ щелкнули img и назначили его blowup img

jQuery(function ($) { 
    var $blowup = $('.blowup img'); 
    $('.thumbs-container img').click(function() { 
     $blowup.attr('src', this.src); 
    }); 
}); 

Демо: Fiddle

Answer 2

$('.blowup img').attr('src',$(this).attr('src')) 

Answer 3

Попробуйте этот код: The JSFiddle is here

Html:

<div class='blowup'> 
    <img src="img3.png" alt="img3"/> 
</div> 

<div class="thumbs-container"> 
     <img src="img1.png" alt="img1"/> 
     <img src="img2.png" alt="img2"/> 
</div> 

JQuery:

$(document).ready(function(){ 
    $('.thumbs-container img').click(function(){ 
     $('.blowup img').attr('src',$(this).attr('src')); 
    }); 
}); 

Я думаю, что это будет полезно для вас ... !!