ThumbSwap is a simple script to be used in gallery or product information pages. Users can hover or click (or use any other event) in order to view the large version that the thumbnail is representing. This script provides an intuitive way for users to interact with your website.
Demo
Javascript
[javascript]
$(document).ready(function(){
//Swap Image on Click
$("ul.thumb li a").bind(‘mouseenter click’, function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
[/javascript]
CSS
[css]
* {margin: 0; padding: 0;}
img {border: none;}
.container {
height: 360px;
width: 615px;
}
ul.thumb {
float: left;
list-style: none;
margin: 0;
width: 156px;
}
ul.thumb li {
margin: 0; padding: 4px;
float: left;
position: relative;
width: 70px;
height: 70px;
}
ul.thumb li img {
width: 60px; height: 60px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
}
#main_view img {
background: #f0f0f0;
border: 1px solid #dddddd;
padding: 5px;
height: 294px;
}
[/css]
HTML
[html]
<div class="container">
<ul class="thumb">
<li><a href="files/main_image1.jpg"><img src="files/thumb1.jpg" alt=""></a></li>
<li><a href="files/main_image2.jpg"><img src="files/thumb2.jpg" alt=""></a></li>
<li><a href="files/main_image3.jpg"><img src="files/thumb3.jpg" alt=""></a></li>
<li><a href="files/main_image4.jpg"><img src="files/thumb4.jpg" alt=""></a></li>
<li><a href="files/main_image6.jpg"><img src="files/thumb6.jpg" alt=""></a></li>
<li><a href="files/main_image7.jpg"><img src="files/thumb7.jpg" alt=""></a></li>
<li><a href="files/main_image8.jpg"><img src="files/thumb8.jpg" alt=""></a></li>
<li><a href="files/main_image9.jpg"><img src="files/thumb9.jpg" alt=""></a></li>
</ul>
<div id="main_view">
<img src="files/main_image1.jpg" alt=""></a>
</div>
</div>
[/html]