Display your photos with an animated slideshow. Includes navigation controls and support for a variety of animation options.
Internet Explorer 7+, Firefox 3+, Safari 4+
Note: The Slideshow component uses the MooTools JavaScript framework, which is known to be incompatible with other JavaScript frameworks, including JQuery.
Options: General Appearance
- Unique Element ID
- The value for the id attribute assigned to the inserted root HTML tag for the component. This value is used to uniquely identify the component.
- Slideshow Width
- The width of the slideshow (excluding thumbnails).
- Slideshow Height
- The height of the slideshow (excluding thumbnails).
- Background Color
- The background color of the slideshow. Often, this should be set to match the background color of the document into which the slideshow will be inserted.
- Image Scaling
- Specifies how images are resized in the slideshow. "Fill Entire Slide Area" means that images will be scaled up or down to maximize the amount of the image that is visible while filling the slide region; part of the image may be cropped if the image has a different aspect ratio than the slide region. "Fit Image in Slide Area" will fill as much of the slide region as possible without cropping any of the image; the image may be scaled up or down. "No Scaling" means that the image will not be scaled; parts of the image may be cropped if it is larger than the slide region, and parts of the slide region may be vacant if the image has smaller dimensions.
- Slide Delay
- The time that a slide is visible before transitioning to the next slide, in milliseconds.
- Slide Transition Type
- The effect used to transition between slides.
- Transition Duration
- The time that is taken to transition from one slide to the next, in milliseconds.
- Number of Flash Colors
- The number of different flash colors used in slide transitions. This is applicable only if Slide Transition Type is set to "Color Flash".
- Flash Color
- The color to flash between slides. This is applicable only if Slide Transition Type is set to "Color Flash".
- Show Controller
- Should the slide controller appear when the user moves the mouse over the slideshow?
- Start Show on Load
- Should the slideshow automatically start once the page has completed loading?
- Run Show in Loop
- Once the slideshow is completed, should it continue with the first slide?
Options: Thumbnail Appearance
- Show Thumbnails
- Should the slide thumbnails be displayed? All of the other options in this section are applicable only if Show Thumbnails is selected.
- Thumbnail Position
- Where should the thumbnails be displayed, relative to the slideshow?
- Show Edge Gradients
- Should gradients be displayed on the edges of the thumbnail section, so that thumbnails appear to fade in and out?
- Thumbnail Section Height
- The height of the thumbnail section, which determines how large the thumbnails will appear. This is applicable only if Thumbnail Position is set to "Bottom" or "Top".
- Thumbnail Section Width
- The width of the thumbnail section, which determines how large the thumbnails will appear. This is applicable only if Thumbnail Position is set to "Left" or "Right".
- Thumbnail Frame Padding
- The padding between the thumbnail image and its frame, in pixels.
- Thumbnail Margin
- The amount of space between adjacent thumbnail frames, in pixels.
- Thumbnail Border Width
- The width of the border of the thumbnail frame, in pixels.
- Thumbnail Border Color
- The color of the border of the thumbnail frame.
- Selected Thumbnail Opacity
- The opacity of the thumbnail corresponding to the slide that is currently displayed. 100% = Completely Opaque, 0% = Completely Transparent
- Selected Thumbnail Frame Color
- The color of the frame surrounding a thumbnail, for the thumbnail corresponding to the slide that is currently displayed.
- Unselected Thumbnail Opacity
- The opacity of a thumbnail corresponding to a slide that is not currently displayed. 100% = Completely Opaque, 0% = Completely Transparent
- Unselected Thumbnail Frame Color
- The color of the frame surrounding a thumbnail, for a thumbnail corresponding to a slide that is not currently displayed.
- Hover Thumbnail Opacity
- The opacity of the thumbnail that has the mouse over it. 100% = Completely Opaque, 0% = Completely Transparent
- Hover Thumbnail Frame Color
- The color of the frame surrounding a thumbnail, for the thumbnail that has the mouse over it.
Options: Caption Appearance
- Show Captions
- Should text captions be displayed for each slide? All of the other options in this section are applicable only if Show Captions is selected.
- Caption Height
- The height of the caption region, in pixels.
- Caption Background Color
- The background color of the caption region.
- Caption Background Opacity
- The opacity of the background of the caption region. 100% = Completely Opaque, 0% = Completely Transparent
- Caption Font Color
- The color of caption text.
- Caption Font
- The font of caption text.
- Number of Images
- The number of slides in the slideshow.
- Slideshow Image
- The full-size image file for a slide.
- Thumbnail Image
- A thumbnail-sized version of the slideshow image to display in the thumbnail section. If a Thumbnail Image is not specified, then the file from Slideshow Image will be used as the thumbnail. However, to improve performance and loading time of the slideshow, it is recommend that you create scaled down thumbnails for each image and set the Thumbnail Image option. This is applicable only if Show Thumbnails is selected.
- Caption
- The caption text for a slide. This is applicable only if Show Captions is selected.