Web-standard solutions for a non-standard world

JavaScript Slideshow


The slideshow code consists of two objects:

  • slide contains the information for a single slide
  • slideshow consists of multiple slide objects and runs the slideshow

slide object


slide.attr (optional)
Attributes for the target window for the hotlink. You must also specify the target attribute. For example, use "width=200,height=300" to set the size of the window. For a list of window attributes, refer to www.webreference.com/js/column7/attributes.html
slide.filter (optional; default = use the IMG filter)
If your slideshow makes use of image transitions (Microsoft Internet Explorer only), then you can set a different transition for each slide. For example, use "progid:DXImageTransform.Microsoft.Pixelate()" NOTE: your IMG element must have a STYLE attribute, such as style="filter:progid:DXImageTransform.Microsoft.Fade()", even if each slide has a custom transition. NOTE2: if you set a custom filter for a slide, then that becomes the default filter for subsequent slides.
slide.image (required)
Image object for the slide.
slide.link (optional)
The URL of a hotlink to jump to when the user clicks the slide.
slide.src (required)
The URL of the slide image.
slide.target (optional)
Name of the target window for the hotlink. For example, use "_blank" to open the hotlink in a new window, or specify a window name such as "slidewindow". If the named window already exists, it will be popped to the front of other window.
slide.text (optional)
Some text to display when the slide is shown.
slide.timeout (optional; default = use the slideshow timeout)
Duration that the slide should appear. Normally you set a default timeout for the slideshow, and all slides use that duration, but if your slides need to appear for differing durations, you can set a timeout for each slide.


new slide(src,link,text,window,attr)
Creates a new slide object. The arguments provide a shortcut for setting the parameters in the slide object. All of the arguments are optional. For example, here are two ways to create the same slide object:
myslide = new slide();
myslide.src = "pics/slideimage.jpg";
myslide.text = "This is an image.";
myslide = new slide(
"pics/slideimage.jpg", "", "This is an image.");
Jump to the link (from the slide.link parameter) for the slide. If a window target was specified (in the slide.target parameter), display the link in the target window and pop the window to the front. If window attributes were also specified (in the slide.attr parameter), then use the attributes for the new window; otherwise, the new window inherits the attributes of the current browser window.
Preload the image for the slide. You proably will not need to call this method, since the slideshow object will handle preloading for you.

slideshow object


slideshow.current (internal)
Array index for the current slide.
slideshow.image (required)
Image object on your HTML page. When you create your IMG element, use the NAME attribute to give your image a name. Set this parameter to document.images.NAME. For example:
<IMG SRC="myimg.jpg" NAME="myimg">
<SCRIPT TYPE="text/javascript">
if (document.images) {
slideshow.name (required)
Name of the slideshow object.
slideshow.prefetch (optional; default = -1)
Number of images to prefetch. I recommend preloading all images unless you have large images, or a large amount of images.
-1 = prefetch all images
0 = load each image as it is used
n = prefetch n images ahead of the current image
slideshow.repeat (optional; default = true)
Repeat flag. If true, then when we reach one end of the slideshow, loop back around to the other slide. If false, stop at the slideshow boundaries.
slideshow.slides (internal)
Array of slide objects.
slideshow.textarea (required if using a textarea to display text)
Textarea form object on your HTML page. Use the slideshow.set_textarea() method to set this parameter. When you create your FORM and TEXTAREA elements, use the NAME attribute to give both of them a name. Set this parameter to document.FORMNAME.TEXTAREANAME. For example:
<FORM NAME="SLIDESFORM" ACTION="slideshow.html">
STYLE="width:400px" WRAP="virtual">
This field displays text
for the image slideshow.
<SCRIPT TYPE="text/javascript">
slideshow.textid (required if using a DIV to display text)
ID of the DIV where you want to display the slide text. Use the slideshow.set_textid() method to set this parameter. When you create your DIV element, use the ID attribute to give it an ID. For example:
This area displays text
for the image slideshow.
<SCRIPT TYPE="text/javascript">
slideshow.timeout (optional; default = 3000)
Number of milliseconds to pause between slides when auto-playing.
slideshow.pre_update_hook (optional)
slideshow.post_update_hook (optional)
User-supplied functions to call before and after the slide is changed. For example:
SLIDESHOW.pre_update_hook = function() {
alert("Changing to next slide: " + this.slides[ this.current ].src);
SLIDESHOW.post_update_hook = function() {
alert("Done changing to slide: " + this.slides[ this.current ].src);
slideshow.timeoutid (internal)
JavaScript timeout ID when auto-playing.


$varname = new slideshow("varname")
Creates a new slideshow object.
Add a new slide object to the slideshow.
Displays the text for the current slide in the textid or textarea.
slideshow.get_all_text(before_slide, after_slide)
Returns the text for all of the slides. Use before_slide and after_slide to specify text to append before and after the text of each individual slide.
Returns the text for the current slide.
Jump to a random slide. This will not include the current slide unless include_current is true.
Jump to slide n. Note that slide numbers start at zero. If you specify -1, then jump to the last slide.
Jump to the hotlink of the current slide. See the slide.hotlink() method.
Go to the next slide. Depending on the slideshow.repeat parameter, loop around when reaching the end of the slideshow.
This convenience method returns a plain HTML version of your slideshow. You can copy the HTML and place it within NOSCRIPT elements, to ensure that search engines and non-JavaScript browsers can access the content of your slideshow. After you copy the HTML, you should comment out this method.
Go to the previous slide. Depending on the slideshow.repeat parameter, loop around when reaching the beginning of the slideshow.
Stop auto-playing the slideshow.
Start auto-playing the slideshow. The timeout argument is optional - if you specify a timeout, then it becomes the new default timeout for the slideshow (see the slideshow.timeout parameter for more information). When auto-playing, the slideshow will not advance until the next image has completed loading.
Sets and restores the slideshow position depending on a browser cookie. See the example code for usage. This is used to save the current position of the slideshow when leaving the page, and restore the position when returning to the page. If you don't use these methods, then when you return to the page the slideshow always starts over from the beginning. Due to security features in JavaScript, you can do this only by using a cookie.
Randomize the order of the slides.
Updates the slideshow image and text on the page, to reflect the current slide.

Page: all 1 2 3 4 5 6 next»
The next page is License


Rate This Script


Home : Contact Us : ©2006 BarelyFitz Designs, All Rights Reserved