Skip to content

January 3, 2012

ThumbSwap

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

$(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;		
	});
});

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;
}

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>
Read more from Scripts

Share your thoughts, post a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments