Click here to Skip to main content
Click here to Skip to main content

Web-Based Image Slideshow using JavaScript

, 10 Nov 2005
Rate this:
Please Sign up or sign in to vote.
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!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

K Baruah
Software Developer (Senior)
United States United States
KB is presently working as a Siebel Analyst in a MNC

Comments and Discussions

 
Questionslideshow using images from database Pinmemberfaizel s13-Aug-13 22:18 
QuestionThis is very good article. PinmemberJayesh Sorathia22-Feb-13 20:33 
GeneralMy vote of 4 PinmemberZandile Dlamini10-Sep-12 21:28 
Generalsetimtout problem PinmemberAjay Kale New30-Aug-10 23:26 
GeneralMy vote of 5 Pinmembernithyanandan L7-Aug-10 9:06 
Generalthanks but Pinmemberalabbasi9-Mar-10 2:29 
QuestionHow to use it for mozilla Pinmemberupenderkumar30-Sep-08 20:14 
GeneralHmmm, seems like another demo ..... Pinmemberfwsouthern18-Nov-05 15:20 
GeneralRe: Hmmm, seems like another demo ..... Pinmembershellom20051-May-09 6:08 
GeneralRe: Hmmm, seems like another demo ..... Pinmemberfwsouthern1-May-09 8:12 
GeneralMake it to be an Custom Control PinmemberaDaNGaDiNG15-Nov-05 16:11 
GeneralRe: Make it to be an Custom Control Pinmembershellom20051-May-09 6:10 
GeneralInternet Explorer only Pinmemberlatta15-Nov-05 14:28 
GeneralRe: Internet Explorer only PinmemberKoiralaKiran21-Oct-09 8:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140709.1 | Last Updated 11 Nov 2005
Article Copyright 2005 by K Baruah
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid