Home

Download this help site
(PDF 80MB)

Download

Adding animated slideshows

You can add an animated slideshow to your Wild Apricot site, displaying one image after another from a collection of images.

You can add a slideshow to a page or a page template so that all pages that use that template will automatically display the slideshow. You could, for example, add a slideshow to your page header to act as an animated header background.

You can add a slideshow by inserting Wild Apricot's slideshow gadget into a page or page template, or you can use a 3rd-party jQuery plugin such as Nivo Slider.

Using Wild Apricot's slideshow gadget

Wild Apricot's slideshow gadget can display images from a folder in your Wild Apricot account or a photo album gadget on a page in your site. Depending on your settings, visitors 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 on your site, or an external page or email address. You can also specify descriptions to appear along the bottom of each image.

Adding a slideshow gadget

To add a slideshow gadget to a page or page template, follow these steps:

 Read more/less
  1. Go to Sites pages (under the Website menu) and create or begin editing the site page or page template where you want the slideshow to appear.
  2. Click the Gadgets icon to display the list of available gadgets.
  3. Drag the slideshow gadget from the list, and drop it where you want it to appear. You can insert it into a section within a layout, or above or below a layout. 

     

    When a layout cell or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a gadget over an empty layout cell or placeholder, it turns green, indicating that you can drop the gadget there. When you drag a gadget above or below a layout, a prompt will appear indicating that you can drop the gadget before or after the layout.
     
  4. After you have dropped the gadget in the desired location, hover your pointer over it and click the Settings icon. 



  5. Within the gadget settings panel on the left, choose which images you want to display. You can display images from the current theme, from a particular folder in your Wild Apricot account, or from a photo album gadget on your site.
  6. Adjust other slideshow gadget settings as required. For more information, see Adjusting slideshow gadget settings (below).
  7. Click Save to save the changes to the page.

For instructions on restricting access to the page, see Page access and visibility.

Adjusting slideshow gadget settings

Now that you have added a slideshow gadget to your page or page template, you can adjust the slideshow gadget settings to control how slideshow images are displayed.

 Read more/less

Gadget settings appear in a panel on the left side (which can be hidden to maximize the page design area). To display the settings panel, you position your pointer over the gadget – while editing a site page or a page template – then click the gadget's Settings icon.

The following settings are available for slideshow gadgets:

Setting

Description

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 a photo album gadget 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.

Gallery layout

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.

Display image

The number of seconds each image should be displayed.

Transition time

The number of milliseconds for the transition between images.

Transition effect

The effect used during the transition time to move from one image to another.

Randomize orderCheck 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. You can link to an external website or email address, to a page on your site, or to an event on your site.

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 image will be automatically loaded as default descriptions.

Margins

The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.

HTML ID

A unique identifier by which the gadget can be referenced within custom CSS or JavaScript code. The identifier is automatically generated but can be replaced with a more readable or memorable one (e.g. MySlideshowGadget).

CSS class

The name of a CSS class defined on the CSS customization screen.

Inline style

CSS code to control the behavior or appearance of the gadget.

Linking images in your slideshow

You can link each image in your slideshow to a separate destination. To link your images, display the slideshow gadget settings and click the Add link to images button.

 Read more/less

On the dialog that appears, you select each image that you want to link, then choose where you want the link to go to. The following options are available:

Option

Description

Next step

Event

Link to the detail page or registration form for one or your events.

Select the event from the list of past and upcoming events. Choose whether to link to the event's detail page or registration page.

Site page

Link to another page on your Wild Apricot site.

Select the page from the list.

Website/Email

Link to an email address or another website.

Enter the email address or website URL.

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.

Displaying captions

You can display a caption along the bottom of each image within your slideshow.

 Read more/less

There are two ways you can add description to images:

  • If you are displaying images from a photo album, captions will be automatically displayed along the bottom of the images.
  • While linking your slideshow images, you can enter a Description for each image.



    If you are displaying images from a photo album, captions will be automatically loaded as default descriptions.

Using Nivo Slider

Icon

Wild Apricot does not provide support for 3rd-party software.

To add an animated slideshow to your site using the Nivo Slider jQuery plugin, follow these steps:

1. Download and upload the plugin files

 Read more/less
Icon

The jQuery library is already installed on Wild Apricot pages, so don't add it manually to your site.

  1. Download nivo_slider.zip.
  2. Extract the contents of the download file to a location of your choice.
  3. Upload the following files into the Theme folder under Resources, from the Files screen or via WebDAV

    • jquery.nivo.slider.pack.js
    • nivo-slider.css 

  4. Create a new folder under your Pictures folder and call it slider-images.
  5. Upload the images you want to use for your slideshow into this folder.

    Icon

    If you plan to add the slideshow to your page header, the images should ideally match the height and width of your page header. For best results, all the images in a slideshow should have the same dimensions.

  6. Click Settings then click Meta-tags under Site settings.
  7. In the Raw headers field, copy and paste the following code:

  8. If you have defined meta-tags for individual pages on your site, you need to add this code to those meta-tags as well. If not, you can click the Reset all pages to use this button to overwrite the meta-tags for all your Wild Apricot pages with this code.

2. Add the slideshow to your site

Now, you can add the slideshow to a page or page template. You can add the slideshow to a content gadget or as a separate custom HTML gadget.

Adding the slideshow to a content gadget

To add the slideshow to a content gadget, follow these steps:

 Read more/less
  1. Begin editing the site page or page template where you want the slideshow to appear.
  2. Click within the content gadget to begin modifying it. If you haven't create the content gadget yet, click the Gadgets icon to display the list of available gadgets then drag and drop a content gadget where you want it.
  3. Within the content gadget, click where you want the slideshow to appear.
  4. Click the S (Snippet) button within the toolbar towards the top of the screen. 

  5. Within the code box, paste the following code:

    replacing image1.jpg to image3.jpg with the names of the images you want to display in your slideshow. (If they reside in a folder other than Pictures/slider-images, then adjust the folder name accordingly.) To include more images in the slideshow, add more <img> tags.

  6. Click Save to save your code.
  7. Click Save to save changes to the page.

The slideshow should now appear on your site page. Switch to public view if the box does not immediately appear.

Adding the slideshow as a custom HTML gadget

To add the slideshow as a separate custom HTML gadget, follow these steps:

 Read more/less
  1. In your Wild Apricot site, go to Sites pages (under the Website menu) and begin editing the site page or page template where you want the slideshow to appear.
  2. Click the Gadgets icon to display the list of available gadgets.
  3. Drag the custom HTML gadget from the Gadget list, and drop it on the desired location. 

     

    When a layout cell or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a gadget over an empty layout cell or placeholder, it turns green, indicating that you can drop the gadget there. When you drag a gadget above or below a layout, a prompt will appear indicating that you can drop the gadget before or after the layout.
  4. After you have inserted the gadget, click the Edit code button within the page settings on the left. 

  5. In the dialog that appears, copy and paste the following code:

    replacing image1.jpg to image3.jpg with the names of the images you want to display in your slideshow. (If they reside in a folder other than Pictures/slider-images, then adjust the folder name accordingly.) To include more images in the slideshow, add more <img> tags.

  6. Click the Save button to save your code.
  7. Click the Save button to save your changes to the page.

The slideshow should now appear on your site page. Switch to public view if the box does not immediately appear. 

You can link the images in your slideshow to another page or site.

 Read more/less

If you want the images in your slideshow to be clickable hyperlinks, then change the <img> tags from:

to:

where  http://yourlink.com is the destination URL for the hyperlink.

Icon

If your hyperlinks do not work on Internet Explorer, add the following code to the CSS customization screen:

Controlling the width and height of the slideshow

To control the width and height of the slideshow, you add custom CSS code to alter its default behavior.

 Read more/less

To add custom CSS code, click the Settings tab and click CSS customization under Site look and feel.

In the code window that appears, enter the following code:

In this code, we are setting the width and height of the slideshow to 90 pixels. You can set your slideshow to whatever width and height you choose, though the slider may ignore one of the two values to avoid stretching or distorting the image.

Instead of specifying the number of pixels for the width or height, you can specify a percentage, as shown in the following code:

You can also set one of the values to auto so that it is automatically calculated based on the other value and the proportions of the image. For example:

Other plugin options

The Nivo Slider has several options you can change.

 Read more/less
 

To change a plugin option, add an option statement within <script> tag in the code shown above using the following format:

where option is the option name and value is the value of the option. For example, to reset the transition effect to fade, the code would appear as:

The sample code below shows all the available options and their defaults values:

The effect option controls the transition between images and can be set to any of the following values:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Troubleshooting

 Slideshow does not work in IE, works fine in other browsers

If you add options to your script then make sure there is no comma after the very last option i.e. the script should always follow this format:

 Slideshow appears on top of drop-down menu options

On some themes, the slideshow may appear on top of drop-down menu options. To resolve this problem, add the following code to the CSS customization screen:

 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7