How I Use Javascript To Run Slideshows Of Images For Internet Explorer As Well As Other Popular Web Browsers And Mobile Devices

Introduction

The presence of visual media in websites nowadays is more important than ever before. And as such, a website builder needs to have reliable code at the ready to facilitate this important task. It must also run consistently well in the popular web browsers and mobile devices that are out there today.

Here I will narrate the Javascript programming code used to run a slideshow that rotates "n" maximum number of jpg files. Below you will find this Javascript code interspersed with comments which are preceded by "//". It runs well on popular browsers like Internet Explorer, Mozilla Firefox, Apple Safari, Opera, Google Chrome as well as the Apple devices iPod, iPhone, iPad and Android smart phones.

An Overview of How the Slideshow Gets Set Up

Before the slideshow can begin, there is a patch of Javascript that assigns the "n" maximum number of jpg files to sequenced Javascript variables as follows:

// The purpose of this code is to assign the file names of jpg image files that are utilized for the slideshow to
// javascript variables which will be rotated in sequence by the slideshow programming code.

<script>
<!--

// assign "n" maximum number of jpg files to their javascript variable counterparts. The javascript variable is
// "slideimage" followed by a number ranging from 1 to the variable ‘number_of_images’ for each image file.

var number_of_images = "n" maximum number
var img_counter = 1
var slideimage = new Array();

while ( img_counter <= number_of_images )
{
slideimage[img_counter] = new Image()
slideimage[img_counter].src = " imagefile "+img_counter+".jpg"
img_counter++
}

//-->
</script>

The jpg 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 coding for the slideshow gets underway. The first step is to detect what desktop or laptop computer browser screen width or mobile device is being used to access the web page. Then 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".

First, 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 slide image displayed until the counter reaches the "n" maximum number, then it resets back to 1 to coincide with the display of the the first jpg slide image. Next, the opacity of the slide image is set to 0.25. This is used for all browsers other than Microsoft Internet Explorer.

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, what type of browser is being used by the site visitor needs to be detected. At this point, the Javascript logic will branch one of two ways: Microsoft Internet Explorer or all others (generally, this is Mozilla Firefox, Apple Safari, Opera, Google Chrome, and mobile devices like Apple and Android).

The Site Visitor is Using Microsoft Internet Explorer, So ...

If the visitor enters the web page through Microsoft Internet Explorer, 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 jpg 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 jpg image file. Then it is played with the document.images.genericname.filters.blendTrans.Play() directive. These Javascript expressions all reference genericname, which is the name component of the HTML image tag that displays the jpg 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 jpg slide image in sequence.

And if it isn't Microsoft Internet Explorer, Then ...

If the visitor enters the web page through a browser other than Microsoft Internet Explorer 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 jpg 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 jpg 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 slideshow 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 slide image in sequence. Unlike the Internet Explorer version, this may use the same jpg image with a different opacity unless the opacity is greater than 1.0. Then the next jpg image in sequence will be used with an initial opacity equal to 0.25.

<script>
<!--

// use the navigator object to detect Apple or Android mobile devices and size the initial image accordingly.
if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i)) || gotcss == 0 ) {

document.write("<img src= eval('slideimage[1].src') name='genericname' id='generic_id' width=220 
height=140>");

} else {

// check for screen widths of greater than 1,024 pixels; equal to 1,024 pixels and equal to 800 pixels.
// size the initial image accordingly.
if (screen.width > 1024) {
document.write("<img src=eval('slideimage[1].src') name='genericname' id='generic_id' width=220 
height=140>");
}
if (screen.width == 1024) {
document.write("<img src=eval('slideimage[1].src') name='genericname' id='generic_id' width=187 
height=119>");
}
if (screen.width == 800) {
document.write("<img src=eval('slideimage[1].src') name='genericname' id='generic_id' width=156 
height=99>");
}

}

// set the slide counter to 2 since the first one is already displayed.
var kounter = 2
// set the opacity variable to 0.25 as an initial starting point for the slide
// image’s displayed opacity.
var opac = 0.25

// begin javascript function "generic_javascript_function".
function generic_javascript_function() {

// fetch the type of browser.
browser_type = navigator.appName;

// if the type of browser is "Microsoft Internet Explorer" then
// process the code in this if-endif structure.
if (browser_type == "Microsoft Internet Explorer") {
// use MSIE blendTrans with a 1 second duration.
document.images.genericname.style.filter="blendTrans(duration=1)"
// use MSIE blendTrans with a 2 second duration.
document.images.genericname.style.filter="blendTrans(duration=2)"
// use MSIE blendTrans to apply the filter.
document.images.genericname.filters.blendTrans.Apply() 
// update the display with whatever the current slide jpg is.
document.images.genericname.src=eval("slideimage["+kounter+"].src")
// use MSIE blendTrans to play the filter.
document.images.genericname.filters.blendTrans.Play()
	// if the slide counter variable is less than ‘number_of_images’ then 
	// move to the next jpg slide in sequence.
	if ( kounter <= number_of_images ) {
	kounter++
	}
	// if the slide counter variable equals ‘number_of_images’ then set it
	// to wrap around to the first jpg slide in sequence.
	if ( kounter > number_of_images ) {
	kounter = 1
	}
// display the slide for 4 seconds.
setTimeout("generic_javascript_function()", 4000)
}

// if the type of browser is not "Microsoft Internet Explorer" then
// process the code in this if-endif structure.
if (browser_type != "Microsoft Internet Explorer") {
// adjust the current slide jpg to the current opacity setting.
document.getElementById('generic_id').style.opacity = opac
// update the display with whatever the current slide jpg is. This can
// either be the same jpg or the next one in sequence if the opacity
// of the previous one has exceeded the value of 1.0.
document.images.genericname.src= eval("slideimage["+kounter+"].src")
// increment the opacity variable by 0.25 so the current
// slide is less opaque.
opac = opac + 0.25
	// if the opacity variable is greater than 1.0, the least opaque value, 
	// then process the code in this if-endif structure.
	if (opac > 1.0) {
	// set the opacity variable back to 0.25, the most opaque setting used.
	opac = 0.25
		// if the slide counter variable is less than ‘number_of_images’ then 
		// move to the next jpg slide in sequence.
		if ( kounter <= number_of_images ) {
		kounter++
		}
		// if the slide counter variable equals ‘number_of_images’ then set it
		// to wrap around to the first jpg slide in sequence.
		if ( kounter > number_of_images ) {
		kounter = 1
		}
	}
// display the slide for 1 second.
setTimeout("generic_javascript_function()", 1000)
}

// end javascript function "generic_javascript_function".
}

// call the javascript "generic_javascript_function" function to create an infinite loop
// to perpetuate the slideshow.
generic_javascript_function()

//-->
</script>

There is one more thing I should mention. I used this slideshow code to run some images on a website that retrieved image names from a MySQL database on a web server. The smaller image files seemed to run smoothly with no problems. There were some large image files that either materialized very slowly or just froze up and stalled the slideshow progression. The file size of the image used in the slideshow appears to be a factor in how well it will work.

Conclusion

Whatever code you are using for application development should ideally perform seamlessly across different web browsers and mobile devices. Although most people are generally patient, they aren’t going to stay on a website for very long if the site is throwing errors left and right or taking too long to load pages.