The structure is very simple. We have the following HTML markup:
<div id="big"><img src="" /></div>
<ul>
<li><img src="exemplo.png" /></li>
<li><img src="exemplo.png" /></li>
<li><img src="exemplo.png" /></li>
</ul>
Your markup may be different than this, but what matters is the mechanics. The goal is to show the image clicked on the larger div, right? Let's start by creating the function to be rotated by clicking on any of the images:
$('ul li img').click(function() {...
First we took the url of the image that was clicked:
var url = $(this).attr('src');
And then we define the new url of the div image #big
:
$('#big img').attr('src', url);
Simple, is not it?
Demonstration
CSS is just to enhance the presentation itself.
$(function() {
$('ul li img').click(function() {
var url = $(this).attr('src');
$('#big img').attr('src', url);
});
});
#big {
border:1px solid #333;
width:300px;
height:250px;
margin:0 auto;
}
ul {
list-style:none;
text-align:center;
padding:0;
}
ul li {
display:inline-block;
width:100px;
height:100px;
}
img {
width:inherit;
height:inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="big"><img src="" /></div>
<ul>
<li><img src="http://static.hsw.com.br/gif/gatos-2.jpg"/></li><li><imgsrc="http://www.mensagenscomamor.com/images/interna/new/frases_de_gatos.jpg" /></li>
<li><img src="https://farm9.staticflickr.com/8608/16526776600_7acef45936_o.jpg" /></li>
</ul>