<< eSource announces SEO Launch Secrets | Search Engine Optimization (SEO) glossary >>

Compact JavaScript image rotator

by Steve W 18. March 2010 12:53

In setting up our video training and landing page, we needed to come up with a slick little photo / image rotator without resorting to AJAX. Javascript is great in that it offers cross browser functionality and is heavily supported. It didn’t take long to find some direction and get us on the path of coding our own little compact image rotator.

First, add the following to your ASP page somewhere in the <BODY> tag:

        1: <script type="text/javascript">

       2:     // =======================================

       3:     // set the following variables

       4:     // =======================================

       5:     // Set slideShowSpeed (milliseconds)

       6:     var slideShowSpeed = 10000; // 10 seconds per slide

       7:     // Duration of crossfade (seconds)

       8:     var crossFadeDuration = 3;

       9:     // Specify the image files

    var Pic = new Array(

        'Images/vidshots/vidbar1.gif',

        'Images/vidshots/vidbar2.gif',

        'Images/vidshots/vidbar3.gif',

        'Images/vidshots/vidbar4.gif'

    );

    // to add more images, just continue

    // the pattern

    // =======================================

    // do not edit anything below this line

    // =======================================

    var t;

    var p = Pic.length;

    var preLoad = new Array();

    for (i = 0; i < p; i++) {

        preLoad[i] = new Image();

        preLoad[i].src = Pic[i];

    }

    var j = 0;

    function runSlideShow() {

        if (document.all) {

            document.images.SlideShow.style.filter = "blendTrans(duration=2)";

            document.images.SlideShow.style.filter = "blendTrans(duration=crossFadeDuration)";

            document.images.SlideShow.filters.blendTrans.Apply();

        }

        if (j > (p - 1)) j = 0;

        document.images.SlideShow.src = preLoad[j].src;

        if (document.all) {

            document.images.SlideShow.filters.blendTrans.Play();

        }

        j = j + 1;

        if (j > (p - 1)) j = 0;

        t = setTimeout('runSlideShow()', slideShowSpeed);

    }

</script>

There is a section of code that defines the Pic array. In this example, we have 4 images in our Images/vidshots directory. You can add or subtract as you see fit.

Now you need to find the spot on your page where you want the image rotation to occur. You can set this in a DIV, Panel, or a table. For this example, we will use a table.

       1: <table border="0" cellpadding="0" cellspacing="0">

       2:     <tr>

       3:     <td id="VU" height="83" width="300">

       4:     <img src="1.jpg" name="SlideShow" width=300 height=83></td>

       5:     </tr>

       6: </table>

Important: Do NOT change the name of the image tag “SlideShow,” since the Javascript code we put in earlier looks for this value. Adjust the height and width variables to your image sizes. The source of the default image, “1.jpg”, can simply be a temporary graphic that shows while the real first image is being downloaded. This happens so fast with smaller graphics that you could set it to a bogus value and the user will never see the annoying ‘X’ (image not found).

Next, modify your <BODY> tag to include an onLoad override:

       1: <body onload="runSlideShow()">

A couple of things to keep in mind… The fading variables control the length of time it takes a slide to fade out and the next one to fade in. This only works (currently) in IE8 and not Firefox. Firefox simply flips to the next image in the array without any type of fade.

Tags: javascript

Web / Software Development

How to display a random image on another websiteThere are times when people want to rotate a picture on a social networking site like Face book, MyS...Creating a Bing Maps (Virtual Earth) backend with custom pushpinsAny web application using Bing Maps has to offer something specific to that site or program. For exa...Validating email address format on your ASP webpageIf you’ve been a web developer for more than 5 minutes you know that you can’t create any type of we...