The Image Gallery Distribution
Version 1.0 [2004-09-17]

The default method of creating an image gallery is to simply copy a single HTML file and edit it to reference the images and thumbnails for your show.  This default template references the code and application components stored on our server - there is no need for you to copy anything else.  Simply right-click on "template.htm" below, and select "Save Target As..." to save a copy on your local machine.

template.htm This is a copy of an empty image gallery template.  This is the file into which the XML data island must be placed.  You can also edit our Sample Gallery if you prefer not to start from a "blank slate".

Alternately, you  can copy all the run-time files in this distribution from this zip file: 2004-09-17-IG.zip.

Tech Notes:

Note that thumbnail images should be 40x40 pixels.  If an image file is named "foo.jpg", it's thumbnail must be named "foo-T.jpg".

You can cause the image gallery to display starting at a selected image by appending "?Image=N" where N is the image number.  For example:

http://myserver/myshow.htm?Image=3

will start the gallery at the 3rd image.

There are two options for constructing a SlideShow object in your HTML file.  First, you may either specify the XML as an internal data island (as is done in template.htm):

...
<XML id=xmlSlideShow>
<Show>
</Show>
</XML>

<SCRIPT>
ss = new SlideShow(xmlSlideShow);
...

Alternatively, you can make the first argument to the SlideShow contstuctor be a string - which will be used as a (relative) URL reference to the XML file to be loaded:

ss = new SlideShow("sample.xml");

The second option is whether to have a statically sized gallery taking up the whole window (the default) or to have the gallery embedded within a larger web page.  To accomplish the latter, the second argument to the SlideShow constructor can be given as the ID of a DIV contained in the web page.  The gallery will then be formatted to fit the WIDTH of this DIV (the height of the DIV will be adjusted so that the images and navigation controls will fit within it).

ss = new SlideShow("sample.xml", divParent);

Changes made in the current release:

  1. Fixed bug in Windows ME where Media Player was not invisible.
  2. Layout bug - portrait images were being scaled to overlap the navigation area.

XML Data Island Documentation

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 (newly implemented attributes are highlighted in yellow).

<XML id=xmlSlideShow>
    <Show
        Width="640"           // Default width and height for all slides in show
        Height="480"
        LargeWidth="<Width>"  // Size of full resolution version of image (if regular image
        LargeHeight="<Height>" // is named "foo.jpg", the large image must be named "foo-L.jpg"
        ImageBase=""          // Default location (path) of image files (optional)
        ThumbBase=""          // Default location (path) of thumbnail files
        ThumbSuffix="-T"      // Suffix to add to image Src to derive the name of the
                              // thumbnail
        MediumSuffix=""       // Suffix to add to the image Src to derive the name of the
                              // primary image in the slide show
        LargeSuffix="-L"      // Suffix to add to the image Src to derive the name of the
                              // large (pop-up) image when a show image is clicked on
        Border="2"            // Size (in pixels) of borders around thumbs and main
                              // image
        BorderColor="white"   // Use any IE allowed color value
        Margin="10"           // Number of pixels around edge of screen and between
                              // thumbnails
        ThumbSize="40"        // Size (in pixels) of thumbnail images (square)
        ThumbMargin="<Margin>"// Unique margin just to use on thumbnails
        ThumbBorder="<Border>"// Unique border size to use on thumbnails
        NavHigh="false"       // When set to true, positions navigation control higher than the
                              // lower right corner if possible.
        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
        CreditsFontSide="10"  // Font size of credits and attribution text
        CreditsColor="<TextColor>" // Color to use for credits and attribution text
        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.
        SoundLoop="true"      // Background sound normally loops forever - set to false to stop at end of media.
        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.
        PlayLoop="false"      // Set to true if you want the Play mode to wrap around the the last to first slide
        SoundFade="true"      // When true, SoundTrack will fade out when the last slide in a show is displayed
                              // (if PlayLoop is true, then this flag does not take effect).
        Upscale="false"       // Set to true to allow images to be shown larger than their native size
                              // (by default, embedded galleries will not scale images to the largest size that will
                              // fit the enclosing DIV).
        Transition="Fade"     // Image transitions cross-fade by default.  Other options are "Wipe", "Slide" or "None" (immediate switch).
    >
    <SoundCredit></SoundCredit> // HTML for attribution for the SoundTrack
    <ImageCredit></ImageCredit> // HTML for attribution or copyright (&#169;) notice for all images in the gallery
    <Title
        ShowTitle="true"      // Set to false to keep the show title from being displayed at the top of the show
        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)
    >
    ...                        // A single line of (HTML) text to display as the show title

    </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".
            NoBase="false"    // If true, ignore Show.ImageBase and Show.ThumbBase (relative images will
                              // be relative to the location of this htm file.
            Thumb="<URL>"     // Numbnail image location - if not given, source.jpg's thumbnail defaults to
                              // source-t.jpg (note the LOWER CASE "t" - important on Unix based web servers).
            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.
            <ImageCredit><ImageCredit> // Image credit to apply to THIS Slide only (overrides Gallery-wide default).
        </Slide>

    </Show>
</XML>