Instructions For Creating Your Own Custom Slideshow

Creating your own custom SlideShow is pretty easy. The basic process is as follows:

  1. Drop your photos into the "photos" directory
  2. Edit the _captions.txt and _urls.txt files (located in the photos directory) using any text editor (e.g., TextEdit)
  3. Swap out the splash and icon images, if desired

SlideShow builds your slideshow "on the fly" using dynamic scripting (PHP and JavaScript) to read the contents of your photos directory!

Below are tips for editing _captions.txt and _urls.txt, more detailed instructions for changing and using default values for captions and URLs, and information on how to change the default splash and icon images.

TIP: Before continuing, control-click on the SlideShow widget file and choose “Show Package Contents” if you haven’t already!

NOTE: SlideShow currently only supports images that are 400 pixels wide by 300 pixels tall, but this limitation may disappear in a future release!

Custom Captions

File location: SlideShow.wdgt/photos/_captions.txt

Use the _captions.txt file for the captions for your photos. Enter your captions, in the same order as your photos, one caption per line with no extra blank lines. The only restriction on what you can say in a caption is that you cannot have two colons in a row (::).

When you have finished editing the file, make sure you save it back to the photos directory as a plain text file.

HTML entities are OK! The following is a list of some common HTML entities you might choose to use in your captions:

Entity Description Rendered Symbol
© copyright symbol ©
& ampersand &
– en dash
— em dash
’ curly apostrophe
“ opening curly quote
” closing curly quote
… elipsis
à a with an accent grave à
é e with an accent acute é
ñ n with a tilde ñ

HTML entities are replaced with the corresponding character when displayed by SlideShow, as shown in the following example:

Caption as entered:
The suspense…is killing me!
Caption as displayed:
The suspense…is killing me!

A pretty complete list of HTML entities can be found on the W3Schools web site.

TIP: Download my SnippetComposer widget to preview how your captions will display in SlideShow!

Custom URLs

File location: SlideShow.wdgt/photos/_urls.txt

Use the _urls.txt file to set the web page(s) to which you want your photos to link. Enter your URLs (web addresses), in the same order as your photos, one caption per line with no extra blank lines. These must be valid, "fully qualified" URLs as showing in the following example:

Valid, fully qualified URLs:
http://andrew.hedges.name/
http://andrew.hedges.name/widgets/
http://andrew.hedges.name/widgets/index.html#slideshow
mailto:andrew@hedges.name
Invalid or partially qualified URLs:
andrew.hedges.name
widgets/index.html
andrew@hedges.name

When you have finished editing the file, make sure you save it back to the photos directory as a plain text file.

Default Values

File location: SlideShow.wdgt/SlideShow.html

If you choose, you can have SlideShow use default values for captions and links. These are, by default, set up to be the following:

Default Caption:    SlideShow 2.0
Default URL: http://andrew.hedges.name/widgets/

If you wish to change the defaults, you can do so. Again, using any text editor, find the following lines in SlideShow.html:

var defaultCaption = "SlideShow 2.0";
var defaultURL     = "http://andrew.hedges.name/widgets/";

To change the defaults, just change the values inside the hash (") marks to whatever you want. Note that any hash marks you include in your default caption must be "escaped", that is, they must be preceded by a backslash as shown in the following example (This does not apply to hash marks you might use in your _captions.txt file!):

var defaultCaption = "My Tiny Photos - 4\" x 3\"";

To make SlideShow use the default values, just delete the _captions.txt and/or _urls.txt files from the photos directory.

Custom Splash & Icon Images

You can also give your SlideShow a custom splash screen and icon. Just replace the following files with your own, using the same image dimensions, of course!

Default.png
what users see when they first open the widget
Icon.png
the icon that shows up in the widget tray
images/backside.png
what users see when they “flip over” the widget