jQuery Slideshow

By
pyr0t3chnician
Published: 05.12.2010Posted in: Tutorials

I programmed this the other day and tried to make it as user friendly as possible. Let me post the code and then I can explain it a little.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   var speed=2500;
   slideShow(speed);
});
function slideShow(speed){   
   var width = $(".slideshow").width();
   var height= $(".slideshow").height();
   var images=$("#slideshow").html();
   var overText=$("#overText").html();
   $("#slideshow").css({"width":width+"px","height":height+"px","position":"relative"});
   $("#slideshow").html("<img src='#' id='imagea' height='"+height+"' width='"+width+"'><img src='13.JPG' id='imageb'  height='"+height+"' width='"+width+"'><div id='hiddenimages'></div><div id='overtext'>"+overText+"</div>");
   $("#hiddenimages").hide().html(images);
   $("#imagea #imageb").hide();
   $("#overtext").css({"position":"absolute","right":"1px","bottom":"1px","z-index":"5"});
   $("#imagea").css({"position":"absolute","top":"1px","left":"1px","z-index":"3"});
   $("#imageb").css({"position":"absolute","top":"1px","left":"1px","z-index":"4"});
   $(".slideshow").each(function(index){
       var old=$("#imageb").attr("src");
       var newsrc=$(this).attr("src");
       setTimeout(function(){
            $("#imagea").attr("src",$("#imageb").attr("src"));
            $("#imagea").show();
            $("#imageb").hide();
            $("#imageb").attr("src",newsrc);
            $("#imageb").fadeIn(1000);
            $("#imagea").fadeOut(1000);
       }, index*speed);
   });
}
</script>
</head>
<body>
<div id="slideshow">
<img src="1.JPG" class="slideshow">
<img src="2.JPG" class="slideshow">
<img src="3.JPG" class="slideshow">
<img src="4.JPG" class="slideshow">
<img src="5.JPG" class="slideshow">
<img src="6.JPG" class="slideshow">
<img src="7.JPG" class="slideshow">
<img src="8.JPG" class="slideshow">
<img src="9.JPG" class="slideshow">
<img src="10.JPG" class="slideshow">
<img src="11.JPG" class="slideshow">
<img src="12.JPG" class="slideshow">
<img src="13.JPG" class="slideshow">
<div id="overText"><img src="caption.png"></div>
</div>
</body>
</html>

So basically, copy and paste everything in the head portion. You can set the speed to what ever you would like.
In the body, create a div with the id of “slideshow”, then add your images inside the div. Add the class “slideshow” to all the pictures you add. You may want to keep them the same size as jQuery does not resize them for you.
Inside the “slideshow” div, add a div with the id “overText”. The text, or image will be displayed at the bottom right corner of the slideshow on top of them all. Format the text or image however you would like.
Final notes:
You can add as many pictures as you want, but 100 pictures might take a while to load.
It only loops once, and doesn’t loop through them again.
You can leave the “overText” div empty and no caption will be displayed on the slideshow.
You can change the speed of the slideshow by increasing or decreasing the speed.

Have fun.