HTML Code:
<html>
<head>
<title>
Slideshow with JQuery
</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
var Icount = $(".ISlideShow div").length;
var fade = setInterval("rotateImages()",5000);
$(".ISlideShow div").hover(function(){
clearInterval(fade);
$(".Thumbnails").show();
},function(){
$(".Thumbnails").hide();
$(".ISlideShow div").show();
fade = setInterval("rotateImages()",5000);
});
$(".Thumbnails").hover(function(){
clearInterval(fade);
$(".Thumbnails").show();
},function(){
$(".Thumbnails").hide();
$(".ISlideShow div").show();
fade = setInterval("rotateImages()",5000);
});
$(".Thumbnails img").hover(function(){
var checkurl = $(this).attr("src");
$(".ISlideShow div").hide();
$(".ISlideShow div img[src = '"+checkurl+"']").parent().show();
},function(){
});
});
function rotateImages(){
var oCurPhoto = $(".ISlideShow div.current");
var oNxtPhoto = oCurPhoto.next();
if(oNxtPhoto.length == 0)
oNxtPhoto = $(".ISlideShow div:eq(0)");
oCurPhoto.removeClass("current").addClass("previous");
oNxtPhoto.css({opacity:0}).addClass("current").animate({opacity:1},1000,function(){oCurPhoto.removeClass("previous");});
}
</script>
<style type="text/css">
div.ISlideShow{
width:400px;
height:300px;
}
.ISlideShow div{
position:absolute;
z-index:0;
}
.ISlideShow div.previous{
z-index:1;
}
.ISlideShow div img{
width:400px;
height:300px;
}
.ISlideShow div.current{
z-index:2;
opacity:1;
}
.Thumbnails{
display:none;
}
.Thumbnails .TImages{
position:absolute;
z-index:3;
}
.Thumbnails .transparent{
position:absolute;
z-index:2;
background-color:#fff;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
height:70px;
margin-top:-70px;
width:400px;
}
.Thumbnails div{
padding-top:50px;
margin-top:-80px;
padding-left:5px;
}
.Thumbnails div img{
float:left;
width:75px;
height:50px;
margin-right:15px;
}
</style>
</head>
<body>
<div class="ISlideShow" style="width: 100%;">
<div>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWiDoO1oO4H_3x5jbayOR7Kq1BAQV_YnsDyQMr5bdYdv47F5AVQtBnW58YqhlpEWsG3AfQ8u1vyjaxaWYlS6GMMi66sDabZoAH8pGzVbmgCcLESUVHIO07zTFzTwSlY6bhlY0QjTuQ5xw/s400/abstract-pictures-electric-guitar-desktop_.jpg" /></div>
<div>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AFGlzwDwGF5JEJa_xt7rtyzs4pgu7IXh6HXCzCTHClGnuJK69BlTFOzi91r3Xuflcw9ZNwCYOg94oBKeGh42yU4qKTHhbTWagrliIgn7ozgmQKnkBujKeBny8v9BZwyHp0aXzqJ2fvH5/s400/3d_abstract_white-hd.jpg" /></div>
<div>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWN6ttXDuaP7X-HmGfZo6MwixV_z4123PHalekEQrUC1QRV7glnliAAtEFQlcCYYpMSzxBsCZf6TCnXBa01OvRWVV0Z0I59-_QVAgbRkCQ8IaPzDJhoexEqbmuSdReyEQ7jVjrScUEI_cy/s400/abstract-pictures-abstract-cool.jpg" /></div>
</div>
<div class="Thumbnails">
<div class="TImages">
<div class="ImagesFetched">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWiDoO1oO4H_3x5jbayOR7Kq1BAQV_YnsDyQMr5bdYdv47F5AVQtBnW58YqhlpEWsG3AfQ8u1vyjaxaWYlS6GMMi66sDabZoAH8pGzVbmgCcLESUVHIO07zTFzTwSlY6bhlY0QjTuQ5xw/s400/abstract-pictures-electric-guitar-desktop_.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AFGlzwDwGF5JEJa_xt7rtyzs4pgu7IXh6HXCzCTHClGnuJK69BlTFOzi91r3Xuflcw9ZNwCYOg94oBKeGh42yU4qKTHhbTWagrliIgn7ozgmQKnkBujKeBny8v9BZwyHp0aXzqJ2fvH5/s400/3d_abstract_white-hd.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWN6ttXDuaP7X-HmGfZo6MwixV_z4123PHalekEQrUC1QRV7glnliAAtEFQlcCYYpMSzxBsCZf6TCnXBa01OvRWVV0Z0I59-_QVAgbRkCQ8IaPzDJhoexEqbmuSdReyEQ7jVjrScUEI_cy/s400/abstract-pictures-abstract-cool.jpg" />
</div>
</div>
<div class="transparent">
.</div>
</div>
</body>
</html>
Demo:
You can see the demo on top of this blog.
The dimensions are tweaked to make the allignments right. You can make changes in margin and padding as you wish.
