Slideshow Reference

The best way to get started with your own slideshow is to read this reference, download the Slideshow package and start tweaking the sample slideshow. Please note that you need a webserver to view the slideshow. The slideshow does not support the file protocol (ie. the slideshow doesn't run when you double click the html page in the file explorer). I am aware of the fact that the documentation is limited. Please don't hesitate to contact me should you have a question.

A slideshow consists of the slideshow engine, image content and slideshow settings. The engine is defined in XAML and JScript files. You do not need to modify these files. The image content consists of an image list file in xml format and the actual images with (optional) thumbnails. The slideshow settings defines the look&feel and the Slideshow behavior and is written in JavaScript.

Creating your own slideshow requires the following two steps:

1. Collect images with optional thumbnails and create the image list xml file.
2. Create an HTML page hosting the slideshow and provide the slideshow settings.

Image list

The list of images are defined in an xml file. The slideshow displays the images in the order as they appear in the image list. The straight-forward format is illustrated below:

<slides baseUrl="Images/">
    <slide imageUrl="image1.jpg" thumbnailUrl="thumb1.jpg" />
    <slide imageUrl="image2.jpg" caption="Image caption" />
</slides>

Required slide attribute imageUrl defines the location of the slide image. An absolute or relative url is allowed. The image does not need to be located at the same domain as the page hosting the slideshow

Optional slide attribute thumbnailUrl defines the location of the slide image thumbnail. The slideshow displays thumbnails at a size of 48x48 pixel. In order to keep loading time at a minimum it is recommended to use small thumbnails.

Optional slide attribute caption defines the title for the current slide. The caption is shown at the bottom of the content pane.

Optional slides attribute baseUrl defines the common base url for both imageUrl and thumbnailUrl. When specified the slideshow engine simply concatenates the baseUrl with the image and thumbnail urls.

Sample image list: slides.xml

Image list restrictions

Loading the image list only works when the file is placed on a webserver. The file-based protocol is not supported by the slideshow engine. Furthermore the image list must be located at the same domain as the HTML page hosting the slideshow.

Hosting the slideshow

Once the images are defined in the image list, you can create the HTML page hosting the slideshow. The page must include the Slideshow Javascript files as specified below.

<script type="text/javascript" src="Silverlight.js" />
<script type="text/javascript" src="SilverlightSpy.js" />
<script type="text/javascript" src="SlideshowCreate.js" />
<script type="text/javascript" src="Slideshow.js" />
<script type="text/javascript" src="Slide.js" />

With the JavaScript files in place, the only thing left to do is to define the actual Slideshow object and refer to the created image list.

<p id="slideshow">
    <script type="text/javascript">
    createSlideshow('slideshow',{
        width: '470px',
        height: '440px',
        slidesSource: 'slides.xml'
    });
    </script>
</p>

The createSlideshow function defines the look&feel and behavior of the Slideshow. The function has two parameters; the first parameter is the parent HTML element id (which must exist). The second parameter defines the settings.

Slideshow settings object

The slideshow settings is a JScript object that should be written using the following syntax.

var settings = {
    width: '470px',
    height: '440px',
    slidesSource: 'slides.xml',
    trackerVisible: false,
    background: purple,
    slideSettings: {
        theme: THEME_RANDOM_STACK
    }}
    

The complete list of attributes is listed below.

Slide settings object

Thursday, May 01, 2008 2:14 PM