Currently in the process of building a website and encountered a small problem. I have three pictures, two small ones and one large one. What I want is for clicking on a small picture to replace the larger one. I have a JavaScript function that accomplishes this, but there is a slight issue. There are 3 sets of these three pictures, so when a small image is clicked to swap with the larger one, it replaces all three large images instead of just the one in its section. Any advice or suggestions would be greatly appreciated. Thank you!
The JavaScript Function
$(document).ready(function(){
$('img').click(function(){
var url = $(this).attr('src');
var bigUrl = $(this).parents('.picture-container').find('.large-picture > img').attr('src');
$('.large-picture > img').attr('src', url);
$(this).attr('src', bigUrl);
});
});
An Example Section
<div class='main-content'>
<div class='picture-container'>
<div class='large-picture' style='width:50%;height:100%;float:left;'>
<img src='close_table_dupontstudios.png' width='100%' height='100%'>
</div>
<div class='picture-content' style='float:right;width:45%;height:100%;'>
...
</div>
</div>
</div>