Using the slideshow gadget, you can add an animated slideshow to your Wild Apricot site, displaying one image after another from a collection of images.
Depending on your settings, visitors to your site can view the images in order at the speed you have set, or they can scroll through the images at their own speed, and use the controls at the bottom of the slideshow to jump to a particular image.
You can separately link each image to a page on your site, an event, or an external page or email. You can also specify descriptions to appear along the bottom of each image.
You can insert a slideshow gadget into a page onto your site, or into a page template so that all pages that use that template will automatically display the gadget. You could, for example, add a slideshow to your page header to act as an animated header background. For instructions on inserting, moving, and deleting gadgets, see Gadgets.
You can also set up a slideshow using a 3rd-party jQuery plugin such as Nivo Slider. For more information, see Adding animated slideshows.
Slideshow gadget settings
Using the gadget's settings, you can control its appearance and content. For instructions on displaying gadget settings, see Gadgets.
The following settings are available for slideshow gadgets:
Images to display
Choose the location of the images you want to display. You can display images from the current theme, from a particular folder in your Wild Apricot account, or from one or more photo album gadgets on your site. You cannot choose photo albums that appear on admin only pages. If you display images from a folder, the images will appear in order by file name. If you display images from a photo album gadget, they will appear in the same order as in the photo album – in the order in which they were added – unless you enable the Randomize order option (below). Any captions added to images in the photo album will automatically displayed along the bottom of the images.
Controls the size and orientation of the slideshow. You can choose from Landscape, Portrait, Square, and Fixed height options. If you select Fixed height, you can specify the height of the slideshow in pixels.
Fit image to slideshow area
Controls whether images are expanded to fill the slideshow area. If this option is enabled, part of the image may be cropped. If this option is disabled, white bars may appear above or beside the image.
The number of seconds each image should be displayed.
The number of milliseconds for the transition between images.
The effect used during the transition time to move from one image to another.
|Randomize order||Check this option to display the slideshow images in random order.|
Allow user to navigate through images
Determines whether controls appear along the side of the slideshow, allowing visitors to scroll through images at their own speed, and at the bottom, allowing visitors to jump to different images instead of viewing the images in order.
|Show countdown bar|
Check this option to display a countdown bar showing how much longer the current image will be displayed.
|Add link to images|
Click this button to link your slideshow images. On the dialog that appears, you can choose where each image should link to. The following options are available:
For each image, you can also specify a tooltip and choose whether you want the linked page to open in a new window or the same window.
You can also specify a description which will appear along the bottom of the image. If you are displaying images from a photo album, any captions already assigned to the images will be automatically loaded as default descriptions.
The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.
|Gadget title||(for Bookshelf and Whiteboard themes) If you specify a gadget title, the title will appear specially formatted within the gadget. Depending on the gadget style you choose, the title may appear in a heading box.|
|Gadget style||(for Bookshelf and Whiteboard themes) The gadget style determines the physical appearance of the gadget. The style you choose will determine the color and format of the gadget title, the gadget content, and the gadget border. You can choose from theme-specific styles and styles that are common to all themes.|
Within the Advanced section, you can enter CSS code or classes to further control the appearance and behavior of the gadget. For more information, see Advanced gadget settings.