The JavaScript slideshow
About the slideshow
The JavaScript slideshow attempts to provide an easy-to-configure dynamic slideshow that reverts to a static image in the absence of JavaScript. The slideshow uses a preloader that enables it to work smoothly even over low-bandwidth connections. An easy-to-edit XML file contains the information for all the slides. Aside from this file, all other configuration of the slideshow is done in the main HTML file.
Get the slideshow
The files for the slideshow can be downloaded from webmasters.ucdavis.edu/resources/download/js_slideshow.zip. Extract the files and then follow the directions below to configure a slideshow.
Components of the slideshow
This JavaScript slideshow consists of a number of components:
- An HTML file (index.html) containing
- links to the scripts necessary to run the slideshow,
- styles to make the slideshow look right,
- and a DIV containing the pieces that will be updated during the slideshow, as well as a NOSCRIPT option for display of a static image for users who don't have or aren't running JavaScript.
- Four JavaScript files (in the includes folder):
- slideshow.js: The main script that controls the slideshow
- preload.js: Handles the preloading of the images (necessary for )
- prototype.js: Enables the getting of the slideshow data from the XML file
- effects.js: Provides the fade transition effect between slides
- An XML file (slides.xml, in the xml folder) that contains the data for each slide in the slideshow: path to image, alt text, and optional link, caption, and second text block
- An images folder containing
- Two images in the common folder: 1_pixel.gif and spinner.gif. These are necessary for the spinner graphic that shows during image preloading.
- A slides folder that holds the images for the slideshow
How to set up the slideshow
Size your images in Photoshop and optimize them for the Web. All images in a given slideshow should have the same height and width in pixels. Otherwise, the slideshow will jump around a bit as it progresses from slide to slide.
Enter the information for the slides into the slides.xml XML file. The content of the file looks like more or less like this:
<slideshow>
<slide>
<!-- The first two elements (image, alttext) are mandatory,
the rest (link, caption, and more) are optional -->
<image>images/slides/0013_arboretum_redbud.jpg</image>
<alttext>Photo: A very pretty picture</alttext>
<link>http://www.ucdavis.edu/about/</link>
<caption>A very pretty picture</caption>
<more>Scenes of UC Davis</more>
</slide>
... more slides ...
</slideshow>
Each <slide>...</slide> block describes one slide. Use a text editor (not Microsoft Word) to edit the file, copying and pasting to make more slideblocks, or cutting to make fewer (that is, replacing the line "... more slides ..." with <slide>...</slide> blocks).
The image and alttext data are required. Provide a path, either relative or root-relative depending on how you are doing addressing on your site, to each image in the <image></image> block. The URL inside <link></link> is used if you want users to be able to click through to another page from each slide. <caption>...</caption> is just what it sounds like, while <more>...</more> can be used for either a sub-caption or a title for each slide.
The HTML file is best edited in a text editor. Most likely you'll be copying the relevant parts to an HTML file of your own, so make sure to copy all the required elements:
- The block of script includes just below the
<title> - The styles for the slideshow in the
<head>area - The onload call in the
<body>tag - The container for the slideshow and its contents
There are a few parts of the HTML file that need to be configured. There is an onload call to initSlideshow in the <body> tag that passes several pieces of information to the slideshow script. They are (in order):
- the path to the XML file that contains the data for the slideshow (image paths, link URLs, captions, etc.)
- the ID of the DIV that holds the slideshow; slideshow_container in this case
- the duration of each slide in seconds
plus three true or false parameters:
- true to show captions, false to not show them
- true to show links, false to not show them
- true to show another line of text, false to not show it
If you set any or all of these last three parameters to true, please make sure that there is data in the XML file to support the particular items that are set to true; e.g., make sure there is a link URL in the XML file for every slide if you set the show links parameter to true.
The styling of the slideshow is controlled by the style declarations in the <head> area of the HTML file. Two, in particular, are important. #slideshow_container needs to have a width and a min-height set in pixels, and #js_slideshow needs a height set in pixels (also set the height in the * html #slideshow_container and * html js_slideshow declarations). The values to be edited are in green italic below:
#slideshow_container {
width: 450px;
min-height: 355px;
font-family: Verdana, Arial, "MS Trebuchet", sans-serif;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #slideshow_container {
height: 355px;
}
/* End hide from IE5/mac */
#js_slideshow {
margin: 0;
padding: 0;
position: relative;
min-height: 355px;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #js_slideshow {
height: 355px;
}
/* End hide from IE5/mac */
The value for min-height should be high enough to contain the image plus the two optional text blocks for caption and more. If you're not using the optional text blocks, then just set the height to that of the images. Otherwise, a little trial and error may be necessary to achieve the optimum height. In the case of the example, the images are 290 pixels high, and an additional 65 pixels was added for a total min-height of 355 pixels. The width attribute for #slideshow_container should be set to the width of the slideshow images.
Even so, if your slideshow includes a caption or more, and the viewer of the slideshow scales up the size of text in their browser, content below the slideshow may twitch upward slightly during the transition from one slide to another. At this time, the only way to avoid that is to use only images in your slideshows and to not include any optional text.
Finally, edit the contents of the slideshow_container DIV:
<div id="slideshow_container">
<!-- Static piece for JavaScript-incapable browsers -->
<!-- Put the image, link, more, and caption here that will
be displayed if user doesn't have JavaScript -->
<noscript>
<div id="slideshow_img_wrapper">
<a href="http://www.ucdavis.edu/about/" class="img_link">
<img src="images/slides/0013_arboretum_redbud.jpg"
alt="Slideshow: A very pretty picture"
hspace="0" vspace="0" border="0" height="290" width="450" />
</a>
</div>
<h3 class="title">
<a href="http://www.ucdavis.edu/about/">Scenes of UC Davis</a>
</h3>
<p class="caption">
<a href="http://www.ucdavis.edu/about/">A very pretty picture</a>
</p>
</noscript>
<!--
Javascript slideshow: this placeholder content will be
replaced dynamically by the slideshow script
This block has everything, all mandatory and optional elements.
Remove the stuff you don't want.
-->
<div id="js_slideshow">
<div id="slideshow_img_wrapper">
<img id="slideshow_image" src="images/common/1_pixel.gif"
alt="" height="290" width="450"
hspace="0" vspace="0" border="0" />
</div>
<h3 id="slideshow_more" class="title" style="display: none;">
Title or something goes here
</h3>
<p id="slideshow_caption" class="caption" style="display: none;">
Caption goes here
</p>
</div>
</div>
The contents of the <noscript> area (in red italic above) should be edited to provide an alternate static image in the event that the end user doesn't have JavaScript running. If you don't want a caption or any other text with the image, then remove the lines starting with <p class="caption"> and/or <h3 class="title">. When editing the image and its link, don't delete the enclosing <div id="slideshow_img_wrapper">.
The container for the actual slideshow components starts with <div id="js_slideshow".... You may delete the lines starting with either <h3 id="slideshow_more"... and/or <p id="slideshow_caption"... (the lines in green italic above) if you don't want to use the optional text, but don't edit or delete anything else. For any optional text block that is deleted, be sure to set the corresponding parameter for initSlideshow to false (in the <body> tag; see instructions above).
That's all, folks. If you have any questions, problems, or suggestions, please contact .