Web-Based Image Slideshow using JavaScript






4.12/5 (20 votes)
Nov 11, 2005
1 min read

258416

9965
A simple tutorial illustrating how to create web-based image slideshow with some cool transition effects.
Introduction
This is a simple tutorial illustrating how to create Web-Based image slideshows with some cool transition effects similar to those found in Microsoft's PowerPoint. The slideshow cycles through the set number of images without having to reload the rest of the page. There are about 23 different transitions to choose from. There is also an option which chooses a number at random from the other 23 transitions. These transitions can also be applied to images by triggering small snippets of JavaScript.
Four small JavaScript functions are used for this:
image_effects()
: Generates the different transition effects.previous_image()
: Displays the previous image.next_image()
: Displays the next image.slideshow_automatic()
: Displays the next image after a certain delay.
Create image list and preload images
Create a list of images to display in the slideshow:
//creating a array of the image object
var image=new Array("images/image1.jpg",
"images/image2.jpg",
"images/image3.jpg",
"images/image4.jpg",
"images/image5.jpg",
"images/image6.jpg",
"images/image7.jpg",
"images/image8.jpg",
"images/image9.jpg",
"images/image10.jpg"
)
//variable that will increment through the images
var num=0
// set the delay between images
var timeDelay
Preload Images
Preload the images in the cache so that the images load faster
//create new instance of images in memory
var imagePreload=new Array()
for (i=0;i<image.length;i++)
{
imagePreload[i]=new Image()
// set the src attribute
imagePreload[i].src=image[i]
}
Image effects
The following JavaScript function renders the cool transition when we move from one image to the next. This is accomplished by using a visual filter - RevealTrans
, which specifies which of the twenty-three available transition types should be used (0-22). Using the apply()
and play()
methods of the filter, we can invoke the transition.
//function for the transition effects
function image_effects()
{
var selobj = document.getElementById('slidehow_transition');
var selIndex = selobj.selectedIndex;
//set the transition to the number selected in the list
slideShow.filters.revealTrans.Transition=selIndex
slideShow.filters.revealTrans.apply()
slideShow.filters.revealTrans.play()
}
Slideshow manually
Use the Next and the Previous buttons to manually start the slideshow. The previous_image()
and Next_image()
functions are pretty straightforward.
//function to get the previous image in the array
function previous_image()
{
//code to execute only when the automatic slideshow is disabled
if (slideshow.checked==false)
{
if (num>0)
{
num--
image_effects()
//set the SRC attribute to let the browser load the preloaded images
document.images.slideShow.src=image[num]
}
if (num==0)
{ //if first image is displayed
num=image.length
num--
image_effects()
document.images.slideShow.src=image[num]
}
}
}
//function to get the next image in the array
function next_image()
{
//code to execute only when the automatic slideshow is disabled
if (slideshow.checked==false)
{
if (num<image.length)
{
num++
//if last image is reached,display the first image
if (num==image.length)
num=0
image_effects()
//set the SRC attribute to let the browser load the preloaded images
document.images.slideShow.src=image[num]
}
}
}
Automatic slideshow
Finally, this code changes the images after a certain time. For this, we use the setTimeout()
method to create the delay. SetTimeout()
takes two parameters. The first parameter is a string that is a snippet of JavaScript code executed when the specified interval has elapsed. The second parameter is an integer that specifies the number of milliseconds.
//for automatic Slideshow of the Images
function slideshow_automatic()
{
if (slideshow.checked)
{
if (num<image.length)
{
num++
//if last image is reached,display the first image
if (num==image.length)
num=0
image_effects()
//sets the timer value to 4 seconds,
//we can create a timing loop
//by using the setTimeout method
timeDelay=setTimeout("slideshow_automatic()",4000)
document.images.slideShow.src=image[num]
}
}
if (slideshow.checked==false)
{
//Cancels the time-out that was set with the setTimeout method.
clearTimeout(timeDelay)
}
}
Conclusion
Overall, this is a very simple script, you can copy the same and paste it wherever you want. No sweat!