You can drag the Slideflow using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation! Or better yet, try the fullscreen example.

Technical background: The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions (included in the download).
03/28/2008: Updated to Slideflow 1.1 – image cropping and gradient direction fixed!

Download Slideflow 1.1 including gallery demo

We’re excited to hear where Slideflow is used, so let us know in the comments!

Credits:

• Based on code by Michael L Perry
• Photoshop actions originally created by Marcus Strehlow
• Photos by Nicholas_T
• Tigra Slider control
• Scriptaculous and Prototype

How to use it in your scripts

The gallery example is a good starting point. Have a look at slideflow.js; we tried to document all important aspects in the code. Initial settings, such as image locations and DOM parent node are passed on initialization. The control exposes a set of methods to change the display at runtime; it provides callbacks to allow the application to react to Slideflow movement and clicks on the center slide. Note that the control requires some specific CSS (slideflow.css) to work.

How to use the Photoshop Actions

You need to run your batch of pictures through the Photoshop actions (originally by Marcus Strehlow) in order to create left, right and center thumbnails. These need to go in different directories, which will later be provided to the control as pathLeft, pathRight and pathCenter.
We opted for Photoshop’s Save for Web feature instead of the regular JPEG export because it delivers far superior quality. Unfortunately, Save for Web doesn’t work well with batches and requires one to manually update the export directories for each of the three Slideflow actions. This can be done by performing the following steps:

1. Create a blank RGB document, or open any RGB image
2. Navigate to the action’s Export command, which is second to last and double-click it
3. The Save for Web dialog opens. Save the blank document in your target folder for the respective action (i.e. left for the left action etc.)
4. If you’re like Tim and like a clean system, you may delete the JPEG you just created

All actions assume 4 : 3 ratio. If pictures have a different ratio, you need to adjust it first, or the thumbnail images will have white edges.

The interface leverages AJAX technologies to deliver a rich user experience, including a Slideflow control mimicking the popular Cover Flow navigation, across all major browsers.

It uses the recently released Microsoft Silverlight 1.0 platform to stream to Windows, Mac OS X and Internet Explorer 5, 6 und 7, Firefox 1.5 and 2 as well as Safari. That’s webcasting 2.0.

Update: The platform has since been extended to support Flash video as well!

Some screenshots:

Main screen with slideflow

Help Overlay

Lightbox slide view