Overview
A Slideshow is a User Item that adds a slideshow to a 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 is a Content Item and does not create a page of its own. You must add it to a Page User Item or you will not see its content.
You can see example output from the Slideshow User Item further down this page.
You designate the images you want in the slideshow by assembling image files in a subfolder of the Input (-i) folder. Create a subfolder in the Input folder and place a copy of the desired image files in the folder.
Images will appear in alphabetical sequence by their filenames. Assign filenames that produce the sequence you prefer. If you number the image files, other wise image "10.jpg" will come before "2.jpg".
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.
Choose the animation effect for the demonstration here: (The animation effect requires JavaScript.)
Add or Edit Slideshow
The Add Slideshow and Edit Slideshow windows control the properties associated with a Slideshow User Item.
Properties
Properties are split into two tabs, "Slideshow" and "Thumbnails".
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.
Enabled
See Enabled in the Common Properties section of the User Items help page.
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.
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.
Page Section
See Page Section in the Common Properties section of the User Items help page.
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 in the Common Properties section of the User Items help page.
Show Caption
If Show Caption is checked, GedSite 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's HTML container must have a fixed height. If Show 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.
Control Location
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 Control Location is set to "None", no controls are included in the slide container. If Control Location is set to "Top", "Top, Bottom", or "Bottom", the controls will appear in the indicated position(s).
Pause on Hover
If Pause 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 on Hover checkbox is disabled and the user may only use the slideshow controls to manipulate the slideshow.
Auto Start
If Auto Start 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 Auto Start or the user will have no way to move from slide 1 to the other slides.
Time per Slide
The Time per Slide specifies the delay between slides when the slideshow is playing.
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. GedSite 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, GedSite 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.
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
The Thumb Width property determines the width of the thumbnail image.
Thumb Height
The Thumb Height property determines the height of the thumbnail image.
List Width
The List Columns pull-down menu determines the number of thumbnail columns.