Slideshow

Overview

A Slideshow is a User Item that adds a slideshow to a Custom Page. The slideshow shows a series of pictures in sequence, and may include controls to pause and resume the show, or jump to a specific image.

A Slideshow User Item is a Content Item. It does not create a page of its own and so you must place it on a Custom Page.

You can see example output from the Slideshow User Item further down this page and also on the Second Site demonstration site.

You designate the images you want in the slideshow by assembling them in a subfolder of the Input (-i) folder. The Slideshow User Item is designed for pictures that are all the same size; mixing different sized images will not produce good results.

You may add multiple slideshows to a single Custom Page, but use caution. Each slideshow adds work for the browser where the amount of work depends on the size of the images and the animation settings. If you add multiple slideshows to a single page, the browser may not be able to keep up.

Animation Effects

The Slideshow User Item includes 28 different effects that control the transition between slides. You can see how the various effects work using the following demonstration.

Russell in Carriage

Russell Baby Picture

Russell and Muriel

Russell as Teenager

Russell and Mary

Choose the animation effect for the demonstration here: (The animation effect requires JavaScript.)

User Item Example

• Family Pictures
  • Thanksgiving Pictures
  • Thanksgiving

The diagram shows a Custom Page named "Family Pictures" with two nested User Items, a heading and a slideshow.

Edit Slideshow

The Edit Slideshow window controls the properties associated with a Slideshow User Item.

Properties

Enabled

See Enabled on the User Items page.

Title and Show Title

Slideshows must have a Title, but the Title may or may not appear on the page. If Show Title is checked, which is the default, the title text appears above the slides.

Folder

The Folder property determines which folder contains the images included in the slideshow. The folder is selected from a pull-down menu that includes all the subfolders in the Input (-i) folder.

To create a slideshow, you must create a subfolder in the Input folder. Images will appear in alphabetical sequence by the filename, so assign names that produce the sequence you prefer.

Width

The Width property determines the width of the slides on the output page. You must specify a width.

Height

The height property determines the height of the slides on the output page. You must specify a height.

Alignment

The Alignment property determines how the slideshow container is positioned relative to other content on the page. The slideshow container includes the title (if any), the thumbnail list (if any), the current slide, and the slideshow controls (if any). You can float the slideshow container left or right, or you may center it. When the container floats left or right, other content may flow to the other side of the container.

Clear

See Clear on the User Items page.

Show Image Caption

If Show Image Caption is checked, Second Site will extract captions from the image files in the slideshow folder and display the appropriate captions when an image is the current slide. The caption will appear beneath the current slide.

Caption Height

The slideshow container must have a fixed height. If Show Image Caption is enabled, the slideshow container must be tall enough to allow room to show the caption beneath the slide. The height is specified in pixels. The default is 40, and 40 pixels should be enough to show about two lines of caption. The line width is determined by the width of the slide images.

Effect

The Effect property controls the transition between slides. You select one of the 28 available transition effects from the pull-down menu. You can see how the various effects work using the demonstration earlier on this page.

Parameters

The Parameters property controls certain details associated with the transition effect. Second Site sets the initial value of the Parameters property when you make a choice from the Effect pull-down menu. For most effects, there are no parameters except for the effect name and the default parameters are used. For others, Second Site includes specific parameter values that enhance the transition effect. If you are familiar with the Cycle plugin for the jQuery JavaScript library, you may experiment with modifying the parameter values.

The speed: parameter controls the speed of the transition. The speed value is expressed in milliseconds, so "1000" is equal; to 1 second and "500" is equal to half a second.

Time per Slide

Start Show on Load

If Start Show on Load is checked, the slideshow will automatically advance from one slide to the next as soon as the page is loaded. If you do not include the slideshow controls, you should enable Start Show on Load or the user will have no way to move from slide 1 to the other slides.

Controls

The slideshow may include a set of buttons to control the slideshow:

The left button moves to the previous slide. The right button moves to the next slide. The previous and next buttons may be used whether the show is playing or not.

The middle button changes based on the context. When the slideshow is playing, the button may be used to pause the show. When the slideshow is paused, the button may be used to restart the show.

If Controls is set to "none", no controls are included in the slide container. If Controls are set to "Top", "Top, Bottom", or "Bottom", the controls will appear in the indicated position(s).

Pause Show on Hover

If Pause Show on Hover is checked, the user can temporarily pause the slideshow by moving the mouse over the slide. If you include the slideshow controls, the Pause Show on Hover checkbox is disabled and the user may only use the slideshow controls to manipulate the slideshow.

Thumbnails

Position

The Position pull-down menu controls the location of the thumbnails relative to the slideshow picture. If set to "None", which is the default, no thumbnail images are displayed. If set to "Left" or "Right", thumbnail images appear to the left or right of the slideshow picture, respectively.

Thumb Width and Thumb Height

The thumbnail width and height are determined by the Thumb Width and Thumb Height values.

List Width

The List Width property determines the width of the list of thumbnails. It must be at least as wide as a single thumbnail and should include a few extra pxiels for borders, padding, etc.