Slide Applications
 
 
HOW THIS DIFFERS FROM THE SIMPLE VERSION
This version is built on the principle of the simple version explained here.  The code on this version is more complex, but the basic flow is the same.  
  • The applications sets a list of images to be used (and some extra parameters that can be customized - see Configuration section below).
  • The application sets a timer that will be called every time the image needs to be changed (using javascript:setTimeout() function).

The difference can be summarized as follows:

  • Supports of different sized images.
  • Use of the image transition effect described on this other tutorial.  (Internet Explorer only).
  • Allows a text to be displayed and clicked below the image.  
  • Added some parameters that can be changed:
  • The list of images.
  • The transition effects to be used (if the browser doesn't support transition, such as Netscape 6 and 7, then the transition effect will be ignored, but the image will still be swapped).
  • The delay for each image.
  • Text to be displayed below the image.
  • URL to be opened when user click the text below the image.
USE OF OBJECTS TO ENCAPSULATE A "SLIDE" OBJECT
Because of the various properties that a slide can have, I decided to encapsulate it into an object type called Slide.  The object is fairly simple, and a portion of the code is shown below.

function Slide(imageFilename, delay, transitionEffectId, link, linkText)
{
  // properties:
  this.image=new Image();
  this.image.src=imageFilename;
  this.delay=delay;
  this.link=link;
  this.linkText=linkText;
  if (transitionEffectId==-1)
    this.transition=-1;
  if (transitionEffectId==-2)
    this.transition=-2;
  else if (transitionEffectId>=0 && 
    transitionEffectId<Slide.prototype.numFilters)
    this.transition=Slide.prototype.filters[transitionEffectId];
  ...
}

The constructor for Slide takes the parameters passed and assign them as properties.  You can see what the parameters mean in the CONFIGURATION section below.  As you can see, a slide has image, delay, link, linkText, and transitionID property.  See the configuration section below for explanation of what these properties are.

TRANSITION EFFECTS
The application uses some of the image transition effect, such as fade, wipe, etc as.  These transition effects are described quite extensively on this other tutorial.  In fact, the code within the slidePicture() function is nearly identical to the one on that tutorial.  The list of filters are static members of "Slide" object, and a new filter can be added following this line:

Slide.prototype.addFilter("blendTrans(duration="+transitionSpeed+");"); // 0 fade
...

Note: I only provided 12 transition effects on this example, but you can add more.  You can find the list of filters and their parameters from Microsoft at:
http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp

SUPPORT FOR DIFFERENT SIZED PICTURE
The code can handle different sized images, but there're some quirks to be aware of.  They are listed below.  Also, here's the part of the code that sets the image to it's correct width and height.  

//target refets to document.getElementById("myImage") or 
//document.images.myImage.
target.height=slides[curImage].getImageHeight();
target.width=slides[curImage].getImageWidth();

If you comment out that part, the image will default to the specified size in the IMG tag.
The side effects to be aware of are:

  • Content of the html page below the image might shift.  To avoid that, you can put the image inside a table or use any other css tricks.  Here I use table of a fixed height set to the maximum height of the images.
  • When using the transition effect (such as fade) to switch between 2 different sized images, the transition will be applied only to the new size (ie: the old image might get cropped if the next image if smaller).  In addition, the alignment will not be correct.
  • Netscape 4.8 (and maybe other versions) has a problem with different sized image.  It will only use the size specified in the IMG tag, and it cannot be changed on the fly.

SUPPORT FOR ADDING TEXT BELOW THE IMAGE
(Note: This portion doesn't work on Netscape 4.8.  It has been tested to work on Netscape 7.02 and IE 6 on the PC)
Below the <IMG> tag, I have put a <A HREF> tag that has a NAME and an ID set to "myImageLink."  

<A HREF="javascript:openLink()" 
  ID="myImageLink" NAME="myImageLink"></A>

Initially, there's nothing between<A></A>, so no text will be displayed.  To add text to it during runtime, the innerHTML property can be used.  Below is the portion of the code within slidePicture() function that does that.
if (document.all && document.getElementById("myImageLink"))
   document.getElementById("myImageLink").innerHTML=slides[curImage].getLinkText();
The code first checks if the element is available, it then calls slides[curImage].getLinkText(), which will return the text to be displayed (see Configuration section below if you forgot where this text was set.).  The innerHTML content is then set to the returned value.

OPENING A NEW WINDOW WHEN THE LINK IS CLICKED
This part is handled by openLink() function shown below.   openLink() looks like below, and it's just a simple call to window.open();  This section can easily be customized.  For example, you can make it open in the link in the current window.  openLink() is executed by the <A HREF> tag below the <IMG> tag as you will see later.

function openLink()
{
  var link=slides[curImage].getLink();
  if (link!=0)
  {
    window.open(link);
  }
}
Within openLink(), the slide.getLink() function is called to retrieve the values you passed to the current slide (see Configuration section below).  It's possible that getLink() will return 0 (if no link is provided with the current slide).  In that case, this function will simply return and doesn't open the link.

Here, I have the HREF point to openLink().  This makes openLink() be executed when the user clicks the link.  
<A HREF="javascript:openLink()" 
  ID="myImageLink" NAME="myImageLink"></A>

CONFIGURATION
Most of the configuration is done in the preloadPicture() function.  To add image, simply add a new entry for the slide in this format:

   slides[slideIndex]=new Slide(imageFilename, delayInSeconds, 
     transitionEffectId, linkURL, textBelowImage);
  • slideIndex is the index number of the slide (you must starts at 0 and 
    increase the number to add more -- se below for example).
  • imageFilename is just the filename of the image.
  • delayInSeconds is how long the image should stay on screen 
    (this includes transition time).
  • transitionEffectId is one of the predefined transition effect 
       between number 0 to 11.  
       See the source of this page to see the list of transition.  
       You can also put -1 to let the code pick a transition for you.
       Sometimes you don't want to use transition (especially when 
       swapping images of different sizes); in this case, put -2.
  • linkURL is an URL to be used when user click the text below the image 
      (optional, put 0 if no link is to be used).
  • textBelowImage is the text that will be displayed below the image 
      (optional, put blank like this:"" if no link is to be used).

Theoretically, you can add as many slides as you want, but I don't recommend too many.  An example is shown below:

STOPPING SLIDESHOW

To stop the slideshow, call this function: stopSlideShow(). You can see an example in the Stop button above.

EXAMPLE CONFIGURATION

function preloadPictures()
{
  slides[0]=new Slide("images/image1.jpg", //imageFilename
     5,                                    //delayInSeconds
     0,                                    //transitionEffectId
     "http://www.permadi.com",             //linkURL
     "Slide 1 - Visit permadi.com.");      //textBelowImage

  slides[1]=new Slide("images/image2.jpg", 
     5, 
     1, 
     0,                                    //linkURL (0 means no link)
     "Slide 2");

  slides[2]=new Slide("images/image3.jpg", 
     5, 
     -1,                                   //transitionEffectId -1 means none
     "http://www.permadi.com/coky/", 
     "Slide 3 - A dog from space..click here for info");

  slides[3]=new Slide("images/image4.jpg", 
     5, 
     -2,                                   //transitionEffectId -2 means select any
     "http://www.permadi.com/poster/swordsmen.html", 
     "Slide 4 - Swordsman");
}
 

Open a barebone example page.

 

(C) 2002 F. Permadi

<<INDEX>>