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
- The application sets a timer that will be called
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:
USE OF OBJECTS TO ENCAPSULATE A "SLIDE" OBJECT
- 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.
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)
else if (transitionEffectId>=0 &&
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.
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:
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
//target refets to document.getElementById("myImage") or
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."
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"))
The code first checks if the element is available, it then calls slides[curImage].getLinkText(),
which will return the text to be displayed
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.
, 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
Most of the configuration is done in the preloadPicture()
function. To add image, simply add a new entry for the slide in this
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:
To stop the slideshow, call this function: stopSlideShow(). You can see an example in the Stop button above.
slides=new Slide("images/image1.jpg", //imageFilename
"Slide 1 - Visit permadi.com."); //textBelowImage
0, //linkURL (0 means no link)
-1, //transitionEffectId -1 means none
"Slide 3 - A dog from space..click here for info");
-2, //transitionEffectId -2 means select any
"Slide 4 - Swordsman");