I have seen a lot of users requesting for simple jQuery scripts for SlideShows. I saw a couple of them, but the scripts assumed that the number of image tags has to be fixed beforehand.
Update: There is a updated version of this article at Simple Image SlideShow using jQuery
I thought of making an attempt at a real simple SlideShow script using jQuery. Here’s what I came up with 5 lines of jQuery code. The images have been added to a ‘images’ folder kept at the root. The images has been defined in an array which can be retrieved from a server. For simplicity sake, I have harcoded the images paths, however the script functionality can adapt dynamically to the number of images in the array.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Slide Show with jQuery</title>
<script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
var imgs = [
'images/emo.jpg',
'images/icon068.gif',
'images/icon260.jpg'];
var cnt = imgs.length;
$(function() {
setInterval(Slider, 3000);
});
function Slider() {
$('#imageSlide').fadeOut("slow", function() {
$(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
});
}
</script>
</head>
<body>
<img id="imageSlide" alt="" src="" />
</body>
</html>
The code is not perfect but will give you an idea of how to extend this sample to suit your own requirements. You can see a Live Demo here.
Bookmark this link on del.icio.us (saved by 0 users)
Did you like this post?
|
|
||
|
|
|
|
|
subscribe via rss |
|
subscribe via e-mail |
|
print this post |
|
follow me on twitter |
comments
13 Responses to "Create a Simple Image Slide Show using jQuery"On your demo page you probably should put a message to say it might take a few moments to load, I almost closed it after staring at a blank page figuring something was horribly broken
Thanks for your comments Chris..Will keep that in mind
Wouldn't it be simpler to not hard-code the images in the script so that I wouldn't have to wonder how to edit the script so that it dynamically changes to the number of images in the images folder...
One Comment then a few Questions
Comment: Thanks a lot! I've been looking for a simple slide show.
Question1: How do I modify your code to force my images to auto center on the web page?
Question2: How can I force the slide show to stop after one full cycle?
Question3: How could I modify your code (or add code) to force this slide show page to redirect to another page when one slide show cycle is complete?
Can you assist?
It does not work!
It doesn't show the images.
It is not working!!
Did you check the demo? It does work. Just wait for a few seconds and the demo shows up.
It's Working ...
thnx
your code works perfectly for my project,my client almost went through the roof..
thanks so much!
looks good, but demo and my page both load with "broken image" icon. Is there a way to start with image?
Stevenearl: I have posted an updated version of this post over here http://www.devcurry.com/2010/03/simple-image-slideshow-using-jquery.html
It become blank before second image fadein.... previous images shold become base when 2nd imaeg is showing so white space can be not shown
Shaym check the updated link in beginning of article that the author has put
Post a Comment