Web-standard solutions for a non-standard world

JavaScript Slideshow

Tutorials

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.
  1. 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">
      <!--
      INSERT_HERE
      // -->
      </SCRIPT> 
  2. 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">
    <!--
    SLIDES = new slideshow("SLIDES");
    
    s = new slide();
    s.src = "pics/pic1.jpg";
    s.link = "pics/pic1-lg.jpg";
    s.text = "Open link in same window";
    SLIDES.add_slide(s);
    
    s = new slide();
    s.src = "pics/pic2.jpg";
    s.link = "pics/pic2-lg.jpg";
    s.text = "Open link in new window";
    s.target = "_blank";
    SLIDES.add_slide(s);
    
    s = new slide();
    s.src = "pics/pic3.jpg";
    s.link = "pics/pic3-lg.jpg";
    s.text = "Open link in new window with attributes";
    s.target = "_blank";
    s.attr = "width=320,height=245";
    SLIDES.add_slide(s);
    
    //-->
    </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.
  3. 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()">
  4. 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.
  5. 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">
      <!--
      document.write("<UL>\n");
      document.write(SLIDES.get_all_text("<li>", "\n"));
      document.write("<" + "/UL>");
      //-->
      </SCRIPT>
  6. 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()">
  7. Activate the slideshow

    Finally, after the IMG tag, you must finish configuring the slideshow and optionally start it running:

    <SCRIPT TYPE="text/javascript">
    <!--
    if (document.images)
    {
      SLIDES.set_image(document.images.SLIDESIMG);
      SLIDES.set_textid("SLIDESTEXT"); // optional
      SLIDES.update();
      SLIDES.play(); //optional
    }
    //-->
    </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: 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: For other transitions using Mozilla, check the following site:

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



Slideshow

Rate This Script


Projects

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