JavaScript Slideshow

Welcome to the slideshow! If you see this then your browser doesn't support the text-changing features of the slideshow; however, all the text should appear below.

Welcome to the BarelyFitz JavaScript slideshow!Use the slideshow controls for a tour of the slideshow features. slideshow image

This is free, open-source software: you can redistribute it and/or modify it under the terms of the GNU General Public License. For more information refer to the License page.The slideshow is supported by user donations. slideshow image

Use the Slideshow Wizard to create a slideshow - just copy the pictures onto your own website, and paste our HTML into your web page.You can also use the Auction Wizard to create slideshows for your eBay auction pages. slideshow image

Each slide can have the following attributes: an image, a link, a description, a window target, window attributes, a custom duration, and a custom image transition.You can also add custom information to each slide. slideshow image

Each image in the slideshow can be a different size - the slideshow can scale the image to a specific width and/or height, or the slideshow can automatically change to the new image size.You can set an image transition, such as a fade-in transition, for the entire slideshow, or set a custom transition for each slide. slideshow image

Users can trigger the link for a slide by clicking the image or by clicking a separate link or button. The link can open a new browser window, and you can specify custom window attributes for each slide, such as width, height, scrollbars, etc. If the window is hidden behind other windows, it is automatically popped to the front. slideshow image

Each slide can have an annotation, which is displayed directly on the page. The annotation can contain text or HTML, and you can use style sheets to control the text appearance.Tools are provided to make the text accessible to search engines and browsers that do not support JavaScript. slideshow image

You can add a variety of controls for the slideshow, and the controls can be links or buttons.Some of the available controls are: next slide, previous slide, goto a slide, start the slideshow, pause the slideshow, etc. slideshow image

The slideshow can automatically advance the slides. You can set the duration for all of the slides, or set a custom duration for each slide. slideshow image

You can shuffle the slides to provide a random order. slideshow image

You can create more than one slideshow on a page. The slideshows can even update at different rates. slideshow image

The slideshow can use a cookie to save its current position, so if you leave the page and come back it will continue where it left off. slideshow image

The slideshow can preload all of the images, or (for a large number of pictures) you can specify the number of images to preload. For automatically running slideshows, the slideshow will not advance until the next slide is loaded. slideshow image

The slideshow is written in easy to use object-oriented code, and has been tested on the Internet Explorer, Mozilla, Netscape, and Opera browsers. Tools are also provided for making the slideshow accessible to older browsers, non-JavaScript browsers, and search engines. slideshow image

Wizards

Slideshow Wizard
This easy-to-use wizard helps you add a slideshow to your web pages.
Auction Slideshow Wizard
This wizard helps you add a slideshow to your eBay auction listings. It doesn't support all of the features of the slideshow (due to restrictions on eBay auction descriptions).

Download & Examples

Copy the following file to your web server:

slideshow.js
Main slideshow code

Examples

Copy the source from the following file to make your slideshow web page:

example-complete.html
HTML template

You can also view the source from the following examples, to examine other features of the slideshow:

example-controls.html
Shows how to create different types of slideshow controls: from links, to buttons, to a slideshow index.
example-self-running.html
Shows how to make a self-running slideshow.
example-times2.html
Shows how to make two slideshows on the same page.
example-fade.html
Shows how to make images fade in for both IE and Mozilla browsers.

Download All

If you have problems downloading these files, you can download the archive:

slideshow.tar

Tutorials

Wizard Demo
Code Walkthrough
Sizing and Scaling Images
Image Transitions and Fades (Microsoft Internet Explorer)
Image Fade-in (Mozilla)

Wizard Demo

Play the video screencast demo for the slideshow wizard.

Code Walkthrough

For best results, use the HTML template to create your slideshow code - view the source to see how it's done. The following are detailed instructions that explain what is happening in the template.

Download and include the JavaScript code
Dowload the main JavaScript source code, and save it in a file slideshow.js on your web server. Then in the HTML file where you want to display the slideshow, add the following in the HEAD section:
```
<SCRIPT TYPE="text/javascript" SRC="slideshow.js">
</SCRIPT> 
```
Notes:
- If your web server does not recognize .js files as JavaScript source, then you must instead insert the contents of the file directly into your HTML file. Still in the HEAD section, insert the file between <SCRIPT> elements:
```
<SCRIPT TYPE="text/javascript">

</SCRIPT> 
```
Initialize and configure the slideshow object
Also in the HEAD section of your HTML file, initialize the slideshow object, and add some slides. This example shows three ways to add a slide, so pick the most appropriate method.
```
<SCRIPT TYPE="text/javascript">

</SCRIPT>
```
Notes:
- When you create the slideshow object (with new slideshow) you must pass in the name of your slideshow object - if you are making an automatically-running slideshow.
- For each slide, you can specify the following information:
  1. The image URL,
  2. The link URL corresponding with that image,
  3. Some text that describes the image,
  4. The target name to pop open a new window when the user clicks the link, and
  5. The list of window attributes such as "width=200,height=200".
  Of these only the first is actually required.
Set up the BODY element for the web page
Your BODY element should contain the following:
```
<BODY
onLoad="SLIDES.restore_position(); SLIDES.update();"
onUnLoad="SLIDES.save_position()">
```
Notes:
- If you don't want to use cookies to store the position of the slideshow, then use the following:
```
<BODY onLoad="SLIDES.update()">
```
Add the IMG for your slideshow
Now in the BODY section of your HTML file, where you want to display the slideshow, add the IMG tag:
```
<A HREF="javascript:SLIDES.hotlink()">
<IMG NAME="SLIDESIMG" SRC="pics/pic1.jpg"
 WIDTH="150" HEIGHT="150" BORDER="0" ALT="slideshow image">
</A>
```
Notes:
- You must give your IMG a NAME.
- The WIDTH and HEIGHT of your image will be used for all images in the slideshow. If an image does not match these dimensions, it will be resized automatically, but if you do not specify a WIDTH or HEIGHT the image size will change for each slide.
- If you don't want the user to click on the image to jump to the link, you can leave off the link and just have the IMG element.
Add the text annotation for your slideshow (optional)
If you want to display text descriptions for the images in your slideshow, include a DIV section and give it a unique ID:
```
<DIV ID="SLIDESTEXT">&nbsp;</DIV>
```
Notes:
- You must put some text inside the DIV.
- Some older browsers cannot change the text inside the DIV. If you want to display all of the slideshow text for those browsers, you can add code like the following (within the DIV or elsewhere on the page):
```
<SCRIPT type="text/javascript">

</SCRIPT>
```
Add controls for your slideshow (optional)
If you want to include links or buttons to control the slideshow, you can use the following links:
```
SLIDES.next()
SLIDES.previous()
SLIDES.play()
SLIDES.pause()
SLIDES.hotlink()
```
For example:
```
<A href="javascript:SLIDES.next()">next</A>
```
or if you're within a form you can use buttons:
```
<INPUT TYPE=button VALUE="next" onClick="SLIDES.next()">
```
Activate the slideshow
Finally, after the IMG tag, you must finish configuring the slideshow and optionally start it running:
```
<SCRIPT TYPE="text/javascript">

</SCRIPT>
```
Notes:
- We check for the existance of document.images because this is a feature that is not supported in older browsers. If a browser does not support images, then the slideshow will not work.
- You must call the set_image method to tell the slideshow which IMG to use. Use the NAME attribute from your IMG tag. If this is not done, then the slideshow will pop up an alert dialog.

Sizing and Scaling Images

If you want your slideshow images to display at full size, do not use any WIDTH or HEIGHT parameters with your IMG element. The browser increases or decreases the size of the image as necessary.

<IMG NAME="ss_img" SRC="myslide.jpg">

To make the browser automatically scale the image, just add the desired image dimensions to your IMG element:

<IMG NAME="ss_img" SRC="myslide.jpg" STYLE="width:320px;height:200px">

This scales each image to the same size, but if your images have different aspect ratios it might cause the images to be distorted.

Another option is to specify only one dimension:

<IMG NAME="ss_img" SRC="myslide.jpg" STYLE="width:320px">

Then every image will be 320px wide, and the height of the image will be scaled so that the image has no distortion. But this will make the other elements on your page move around each time the image changes size.

If you want the overall size of the image area to stay the same, put your image into a TABLE with a fixed size. Make the size of the table equal to or slightly larger than the largest scaled size of your images.

<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0"
 STYLE="width:320px;height:300px;text-align:center;background:black;">
<TR>
  <TD VALIGN="center">
    <IMG NAME="ss_img" SRC="myslide.jpg" STYLE="width:320px"
    ALT="Slideshow image">
  </TD>
</TR>
</TABLE>

In the previous example, if the image height is scaled to less than 300px, black bars will appear above and below the image.

Image Transitions and Fades (Microsoft Internet Explorer)

The slideshow has built-in support for image transitions in Microsoft Internet Explorer.

To add a fade-in transition to your slides, simply add the following attribute to your IMG element:

STYLE="filter:progid:DXImageTransform.Microsoft.Fade()"

You can also set a different transition for each slide:

myslide.img = new slide('pic1.jpg');
myslide.filter = 'progid:DXImageTransform.Microsoft.Pixelate()';
SLIDES.add_slide(myslide);

For an example of using transitions, see the following:

example-fade.html

For more information on the supported filters, visit the Microsoft website:

Image Fade-in (Mozilla)

It's a bit more difficult to make your images fade-in using the Mozilla browser. You can supply a hook function that runs the fade-in when the image is changed:

var fadein_opacity = 0.04;
var fadein_img = SLIDES.image;
function fadein(opacity) {
  if (typeof opacity != 'undefined') fadein_opacity = opacity;
  if (fadein_opacity < 0.99 && fadein_img && fadein_img.style &&
      typeof fadein_img.style.MozOpacity != 'undefined') {

    fadein_opacity += .05;
    fadein_img.style.MozOpacity = fadein_opacity;
    setTimeout("fadein()", 50);
  }
}

SLIDES.post_update_hook = function() { fadein(0.04); }

For an example of using a fade-in, see the following:

example-fade.html

For other transitions using Mozilla, check the following site:

Brothercake: Image Transitions

Documentation

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

parameters

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.

methods

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.");

slide.hotlink()

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.

slide.load()

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

parameters

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) {
  myslideshow.set_image(document.images.myimg);
}
</SCRIPT>

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">
<TEXTAREA NAME="SLIDESTEXT" ROWS="4" COLS="40" READONLY
STYLE="width:400px" WRAP="virtual">
This field displays text
for the image slideshow.
</TEXTAREA>
</FORM>
<SCRIPT TYPE="text/javascript">
myslideshow.set_textarea(document.SLIDESFORM.SLIDESTEXT);
</SCRIPT>

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:

<DIV ID="SLIDESTEXT">
This area displays text
for the image slideshow.
</DIV>
<SCRIPT TYPE="text/javascript">
myslideshow.set_textid("SLIDESTEXT");
</SCRIPT>

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.

methods

$varname = new slideshow("varname"): Creates a new slideshow object.
slideshow.add_slide(slide): Add a new slide object to the slideshow.
slideshow.display_text(): 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.
slideshow.get_text(): Returns the text for the current slide.
slideshow.goto_random_slide(include_current): Jump to a random slide. This will not include the current slide unless include_current is true.
slideshow.goto_slide(n): Jump to slide n. Note that slide numbers start at zero. If you specify -1, then jump to the last slide.
slideshow.hotlink(): Jump to the hotlink of the current slide. See the slide.hotlink() method.
slideshow.next(): Go to the next slide. Depending on the slideshow.repeat parameter, loop around when reaching the end of the slideshow.
slideshow.noscript(): 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.
slideshow.previous(): Go to the previous slide. Depending on the slideshow.repeat parameter, loop around when reaching the beginning of the slideshow.
slideshow.pause(): Stop auto-playing the slideshow.
slideshow.play(timeout): 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.
slideshow.restore_position(cookiename) slideshow.save_position(cookiename): 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.
slideshow.shuffle(): Randomize the order of the slides.
slideshow.update(): Updates the slideshow image and text on the page, to reflect the current slide.

License

Article Copyright

Program License

slideshow.js is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

Links

Please give me credit and link back to this page to ensure that search engines give this page a higher ranking. You can add the following HTML to a page on your web site (it doesn't have to appear on the same page as your slideshow, just a page that is indexed by Google):

<A HREF="http://slideshow.barelyfitz.com/">JavaScript Slideshow</A> provided by <A HREF="http://www.barelyfitz.com/">BarelyFitz Designs</A>

Donations

If you like this script donate a few bucks, make an Amazon.com purchase through my links, or buy me something from my wishlist.

Page: all 1 2 3 4 5 6

JavaScript Slideshow

Wizards

Download & Examples

Examples

Download All

Tutorials

Wizard Demo

Code Walkthrough

Sizing and Scaling Images

Image Transitions and Fades (Microsoft Internet Explorer)

Image Fade-in (Mozilla)

Documentation

slide object

parameters

methods

slideshow object

parameters

methods

License

Article Copyright

Program License

Links

Donations

Slideshow

Rate This Script

Projects