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.
where to put this all code...?? plz help
ReplyDelete