The Image Gallery Sources

Click on these links to download the source files used in the image gallery application (use can use right-click "Save Taget As..." to make a copy to your hard disk).

slideshow.js Main SlideShow source
util.js JavaScript Utilities
slideshow.css Style Sheet for slide show
blank.gif Blank GIF file used for temporary display of IMG (must be placed in an "images" directory")
template.htm This is a copy of an empty slideshow template.  This is the file into which the XML data island must be placed.  A complete sample slideshow can be viewed at slideshow.htm.

The XML Data island that drives the slide show has the following format.  Note that the values show here are typically the default values of those attributes.  Attributes can be omitted from the XML and the default values will be used.

<XML id=xmlSlideShow>
    <Show
        Width="640"           // Default width and height for all slides in show
        Height="480"
        Margin="10"           // Number of pixels around edge of screen and between
                              // thumbnails
        ThumbSize="40"        // Size (in pixels) of thumbnail images (square)
        Border="2"            // Size (in pixels) of borders around thumbs and main
                              // image
        BorderColor="white"   // Use any IE allowed color value
        UnselectedColor="black" // Color of border around "unselected" thumbnail images
        ErrorColor="red"      // Color of border around thumbnails of images that cannot be loaded
                              // (typically a missing image).
        BackColor="#3C3C3C"   // Background color of page
        TextColor="white"     // Text color
        Font="Verdana"        // Default Font to use on page
        FontSize="14"         // Default font size to use on page
        TitleFont="<Font>"    // Font to use for the Title (default is the same as the "Font" attribute
        TitleFontSize="<FontSize>+4" // Font size to use for the Title (default is the page "FontSize" plus 4)
        SoundTrack="<URL>"    // URL to a standard windows sound format (eg., *.WAV, *.MP3, *.WMV).  The
                              // Windows Media Player must be installed on the user's machine to hear the
                              // background music track.
        Delay="7"             // The number of seconds to dwell on each image when the user clicks the "Play"
                              // button in the slideshow.
        AutoPlay="false"      // Set to true if you want the slideshow Play to occur immediately on loading.
    >
    <Title></TITLE>           // A single line of (HTML) text to display as the show
                              // title
    <Home
        HREF="<URL>"          // Reference to a home page (link from Home button)
    />

followed by 1 or more <Slide>'s as follows:

        <Slide
            Src="<URL>"       // Relative URL of image file.  So that "foo.jpg" will refer to a
                              // file in the same directory as this htm file; "pictures/foo.jpg"
                              // refers to a file in the subdirectory "pictures".
            Width="<Show.Width>" // Width and height of rectangle to display for slide.  If not given,
                                 // the default size given in the <Show WIDTH= HEIGHT=> attributes are used.
            Height="<Show.Height>"
        >
            <Title></Title>   // HTML text to display as the slide title
            <Date></Date>     // Date of image - if omitted, nothing is displayed
            <Desc></Desc>     // Multiple lines of (HTML) text to display
                              // as the slide description.
        </Slide>

    </Show>
</XML>