Skip over navigation

SlideShowPro

We have a licensed copy of the Flash-based SlideShowPro in the /common folder on the dept edit servers. We also have some xsl scripts that can assist with automatically building galleries from a folder of images.

You can view a sample gallery (opens in new window). Browse inside the gallery-sample folder to get an idea of how things are set up.

Be aware that devices that do not support the Flash plugin (including iPhone and iPad) would be unable to display this slideshow. You could provide alternative static content inside whatever element that you are replacing dynamically with the slideshow JavaScript (see below).

This solution for the gallery will require copying a "gallery" directory of files over to your site folder or to a folder within. You can rename this directory to whatever you want. Copy the following directory to your local site directory via the Content Editor (CE):
https://deptaedit.princeton.edu/common/dev/gallery/
or
https://deptbedit.princeton.edu/common/dev/gallery/

After copying, you will need to edit the cms-common.xsl file to set a width and a height for your embedded slideshow. Also, this script, by default, will replace an element with the id of "ssp-gallery"; however, it can replace any div id that you want; that element's id just has to be specified in the cms-common file. We do not currently have a simple means of placing more than one instance of the slideshow on a single page.

When figuring out the player width and height, you may need some trial and error to avoid the black bars on top and bottom or on the sides. Many cameras use a 4:3 ratio for their shots, so try 500 by 375 or 550 by 413, and so on. Remember to add extra pixels for the bottom navigation. With the default parameters, that thumbnail navigation adds 35 pixels to the vertical, so 500 by 375 would become 500 by 410.

cms-common.xsl example:
<set variable="var.ssp-id" value="ssp-gallery" />
<set variable="var.ssp-width" value="500" />
<set variable="var.ssp-height" value="410" />

If you use an existing directory, it is important that your slideshow folder contain at least the following four files from that original folder:
index.xml
images.xml
param.xml
cms-common.xsl

You can add any additional content you want to the index.xml file, as long as that page contains the replaceable div id specified in the cms-common.xsl variable (see above).

Your folders and images can be named anything you want. The script will automatically comb through these folders. Each folder makes a separate album within that instance of the SlideshowPro Flash player. The name of each album is based on its directory name. If you need to change the order of the albums, you can add a numerical string to the folder name (ex. "01-"). This string would not show up in the album/gallery name. The slideshow also automatically uses each image's Metadata Title attribute as a caption. You should set this for each image if you desire captions.

The Flash slide show will NOT work inside the Insite Editor frame.

For a slideshow embedded in the content, make sure your index.xml file has the following inserted somewhere; the RXML component is easiest. Anything inside the div tags show up if Flash is not enabled, such as the aforementioned alternative static content.
<div id="ssp-gallery">
</div>

There are over 150 options that can be set in the param.xml file. Full Customization Guide is at the SlideShowPro wiki.

The SlideShowPro site has a few example combinations of these setup options.

You should not use the multi-megabyte photos copied directly from a camera for these slideshows. This setup will not resize your images, it will only use Flash scaling to change their apparent size, if applicable. Photoshop has an "Image Processor" dialog under the File --> Scripts menu that you can use to batch resize an entire folder of images. I would recommend that you try to keep your images less than a couple hundred kilobytes each.