Post
Ask Question

JavaScript For Running Slideshows of Images

Introduction

 
Here I will narrate the JavaScript programming code used to run a slideshow that rotates “n” number of images. I have provided the code below for this function. It runs well on Internet Explorer, Firefox, Safari, Opera, Chrome as well as iPod, iPhone, iPad, and Android. 
 

Get set up for the slideshow

 
Before the slideshow can begin, there is a patch of JavaScript that assigns the “n” number of image files to the sequenced JavaScript variables as follows.
 
// The purpose of this code is to assign the file names of image files that are utilized for the slideshow to
// javascript variables that will be rotated in sequence by the programming code.
  1. <script>    
  2. <!--    
  3.     // assign “n” a maximum number of image files to their javascript variable counterparts. The javascript variable is    
  4.     // “slide image” followed by a number ranging from 1 to the variable ‘number_of_images’ for each image file.    
  5.     
  6.     var number_of_images = {“n” maximum number}    
  7.     var img_counter = 1    
  8.     var slideimage = new Array();    
  9.     
  10.     while ( img_counter <= number_of_images )    
  11.     {    
  12.         slideimage[img_counter] = new Image()    
  13.         slideimage[img_counter].src = " imagefile "+img_counter+".jpg"    
  14.         img_counter++    
  15.     }    
  16.     
  17.     //-->    
  18. </script>   
The images, (imagefile1.jpg, imagefile 2.jpg, imagefile 3.jpg, ….. imagefile n.jpg) are assigned in sequence to JavaScript image objects “slideimage[1], slideimage[2], slideimage[3], ….. slideimage[n]”.
 
Next, the initial slideshow image will be displayed with the appropriate height and width values. The image, “<img src= eval('slideimage[1].src') name='genericname' id='generic_id' width=”widthvalue” height=”heightvalue”>”, will have the name component “genericname” and the element id “generic_id”.
 
The slide show counter variable is set to 2. This is because the first slideshow image is already displayed. The slideshow counter increments by 1 for each new image displayed until the counter reaches the “n” maximum number, then it resets back to 1 to coincide with the display of the first image. Next, the opacity of the slide image is set to 0.25. This is used for all browsers other than Microsoft Internet Explorer (except IE 11).
 
Now begin the JavaScript function, “generic_javascript_function”. After it completes, it will be called again creating “an infinite loop”. Once inside “generic_javascript_function”, the type of browser being used needs to be detected. At this point, the JavaScript will branch one of two ways. The older Microsoft Internet Explorer (before IE 11) or all others (generally, this is Mozilla Firefox, Apple Safari, Opera, Google Chrome, IE 11, and mobile devices like Apple and Android).
 
IT'S AN OLDER MICROSOFT INTERNET EXPLORER, SO…
 
If the visitor enters the web page through an older version of Microsoft Internet Explorer (before IE 11), then the proprietary MSIE “blendTrans” function will be called. First for 1 second ‘document.images.genericname.style.filter="blendTrans(duration=1)"’ and then for 2 seconds ‘document.images.genericname.style.filter="blendTrans(duration=2)"’. Next, the ‘document.images.genericname.filters.blendTrans.Apply()’ directive will be called to apply the filter. After this, the image will be updated with the current JPEG image file, ‘document.images.genericname.src=eval("slideimage["+kounter+"].src")’. Notice that ‘"slideimage["+kounter+"].src"’ is a concatenated expression that creates the JavaScript variable that contains the current JPEG image file. Then it is played with the ‘document.images.genericname.filters.blendTrans.Play()’ directive. These JavaScript expressions all reference “genericname”, that is the name component of the HTML image tag that displays the JPEG images used in the slideshow.
 
If the slideshow counter variable is less than or equal to the “n” maximum number, then increment it by 1 (advance to the next image in the slideshow sequence). If the slideshow counter variable is greater than the “n” maximum number, then reset it to 1 (wrap around to the first image in the slideshow sequence). Then display the image for 4 seconds before exiting the “generic_javascript_function” function. Next, call the function to repeat the process for the next image in the sequence.
 
AND IF IT ISN'T MICROSOFT INTERNET EXPLORER, THEN…
 
If the visitor enters the web page through a browser other than the older Microsoft Internet Explorer (before IE 11) or by way of a mobile device, then the ‘document.getElementById('generic_id').style.opacity = opac’ directive is used to set the current slideshow image to the current opacity setting. Notice, the use of the “generic_id” element id from the HTML image tag to effect this opacity change. Next, update the slideshow image with whatever the current JPEG is with ‘document.images.genericname.src=eval("slideimage["+kounter+"].src")’. The “genericname” name component from the HTML image tag is used for this. This could be the same image as before with a different opacity or it can be the next image in the slideshow sequence because the opacity of the previous slideshow image exceeded 1.0 and has now been set back to 0.25.
 
Now, increment the opacity variable by 0.25 more than its current value. This will make the next slide presentation less opaque than the previous one. If the new opacity is greater than 1.0, then do the following.
 
Set the opacity variable to 0.25. If the slideshow counter variable is less than or equal to the “n” maximum number, then increment it by 1 (advance to the next image in the slideshow sequence). If the slideshow counter variable is greater than the “n” maximum number, then reset it to 1 (wrap around to the first image in the sequence). Then display the image for 1 second before exiting the “generic_javascript_function” function and then making a call to the function to repeat the process for the next image in the sequence. Unlike the older Internet Explorer version, this may use the same image with a different opacity unless the opacity is greater than 1.0. Then the next image in the sequence will be used with an initial opacity equal to 0.25.
  1. <script>    
  2. <!--    
  3.     document.write("<img src= eval('slideimage[1].src') name='genericname' id='generic_id' width=220     
  4.     height=140>");　　　　    
  5.     // set the slide counter to 2 since the first one is already displayed.    
  6.     var kounter = 2    
  7.     // set the opacity variable to 0.25 as an initial starting point for the     
  8.     // image’s displayed opacity.    
  9.     var opac = 0.25    
  10. 　　　　    
  11.     // begin javascript function “generic_javascript_function”.    
  12.     function generic_javascript_function() {    
  13.     
  14.         // fetch the type of browser.    
  15.         browser_type = navigator.appName;    
  16.     
  17.         // if the type of browser is the older Microsoft Internet    
  18.         // Explorer (before IE 11), then process the code in this    
  19.         // if-endif structure.    
  20.         if (browser_type == "Microsoft Internet Explorer") {    
  21.             // use MSIE blendTrans with a 1 second duration.    
  22.             document.images.genericname.style.filter="blendTrans(duration=1)"    
  23.             // use MSIE blendTrans with a 2 second duration.    
  24.             document.images.genericname.style.filter="blendTrans(duration=2)"    
  25.             // use MSIE blendTrans to apply the filter.    
  26.             document.images.genericname.filters.blendTrans.Apply()     
  27.             // update the display with whatever the current image is.    
  28.             document.images.genericname.src=eval("slideimage["+kounter+"].src")    
  29.             // use MSIE blendTrans to play the filter.    
  30.             document.images.genericname.filters.blendTrans.Play()    
  31.             // if the slide counter variable is less than ‘number_of_images’, then     
  32.             // move to the next image in the sequence.    
  33.             if ( kounter <= number_of_images ) {    
  34.                 kounter++    
  35.             }    
  36.             // if the slide counter variable equals ‘number_of_images’, then set it    
  37.             // to wrap around to the first image in the sequence.    
  38.             if ( kounter > number_of_images ) {    
  39.                 kounter = 1    
  40.             }    
  41.             // display the image for 4 seconds.    
  42.             setTimeout("generic_javascript_function()", 4000)    
  43.         }    
  44.     
  45.         // if the type of browser is not the older Microsoft Internet    
  46.         // Explorer (before IE11), then process the code in this    
  47.         // if-endif structure.    
  48.         if (browser_type != "Microsoft Internet Explorer") {    
  49.             // adjust the image to the current opacity setting.    
  50.             document.getElementById('generic_id').style.opacity = opac    
  51.             // update the display with whatever the current image is. this can    
  52.             // either be the same image or the next one in sequence if the opacity    
  53.             // of the previous one has exceeded the value of 1.0.    
  54.             document.images.genericname.src= eval("slideimage["+kounter+"].src")    
  55.             // increment the opacity variable by 0.25 so the current    
  56.             // image is less opaque.    
  57.             opac = opac + 0.25    
  58.             // if the opacity variable is greater than 1.0, the least opaque value,     
  59.             // then process the code in this if-endif structure.    
  60.             if (opac > 1.0) {    
  61.                 // set the opacity variable back to 0.25, the most opaque setting used.    
  62.                 opac = 0.25    
  63.                 // if the slide counter variable is less than ‘number_of_images’, then     
  64.                 // move to the next image in sequence.    
  65.                 if ( kounter <= number_of_images ) {    
  66.                     kounter++    
  67.                 }    
  68.                 // if the slide counter variable equals ‘number_of_images’, then set it    
  69.                 // to wrap around to the first image in the sequence.    
  70.                 if ( kounter > number_of_images ) {    
  71.                     kounter = 1    
  72.                 }    
  73.             }    
  74.             // display the image for 1 second.    
  75.             setTimeout("generic_javascript_function()", 1000)    
  76.         }    
  77.     
  78.         // end javascript function “generic_javascript_function”.    
  79.     }    
  80. 　　　　    
  81.     // call the javascript “generic_javascript_function” function to create an infinite loop    
  82.     // to perpetuate the slideshow.    
  83.     generic_javascript_function()    
  84.     
  85.     //-->    
  86. </script>   

Conclusion

 
Whatever code you are using for application development should perform seamlessly across multiple browsers and mobile devices. This code seems to do this function well. I should mention that the smaller sized image files seemed to run smoothly with no problems using this code. However, the larger ones of 1 to 3 MB either materialized very slowly or just froze up. So the file size of the image used appears to be a factor in how well this will work. Aside from that, I haven't noticed any other problems.


Similar Articles