Check out this demonstration:
Avoid preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="small-images">
<a href="http://lorempixel.com/400/200/sports/1/"><img src="http://lorempixel.com/100/50/sports/1/"></a>
<a href="http://lorempixel.com/400/200/fashion/1/" class=""><img src="http://lorempixel.com/100/50/fashion/1/"></a>
<a href="http://lorempixel.com/400/200/city/1/"><img src="http://lorempixel.com/100/50/city/1/"></a>
</div>
Javascript (jQuery)
$(function(){
$(".small-images a").click(function(e){
var href = $(this).attr("href");
$("#big-image img").attr("src", href);
e.preventDefault();
return false;
});
});
At the moment, there is only 1 large image; when an A element is clicked, its href attribute is copied as the SRC of the large image.
Live demo: http://jsfiddle.net/Qhdaz/1/
If you want to achieve this without additional DOM manipulation, you can include 3 big images and load them directly. The previous method does not preload the images, but the following function will.
With preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript:
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle.net/Qhdaz/2/