Adding Animated Slideshows

Currently Wild Apricot does have a built in photo album pages (see Photo Gallery) and member photo albums (see Member Albums ) but we don't have any other gadgets  to display images on other pages.  

But with a little jQuery and Theme Override magic we can get some impressive results pretty quickly - like the example below .

Required

First you should know that these tutorials are written for experienced designers and developers so they are bit more technical then our regular help.

To complete this example you will need the following:

• Enable Theme Overrides (see Theme Overrides ) for your site
• Download the jQuery easySlider plugin (see easyslider1.7.zip )

Installing the Plugin

If you've used the jQuery library before you might think that you need to include the library into your public website. With Wild Apricot sites this is not necessary since the library is included by default on all public pages. 

Uploading the Files

After you've downloaded the plugin you will need to extract the files on your computer and then upload them to your site. You can do this through the online file management tool (see File Management)  or through WebDav (see Working with WebDAV).

I decided to put them in the /Theme folder in a new folder called 'easyslider'. But you could put them anywhere so long as you update all the references to the files as needed.

My final folder structure looks like this:

1. resources/Theme/easyslider/js/easySlider1.7.js
2. resources/Theme/easyslider/images
3. resources/Theme/easyslider/css

Including the Plugin via Theme Overrides

Again since the jQuery library is already included into Wild Apricot pages we don't need to include it - but we do need to include the easySlider plugin and css files into our theme to start using slideshows on our pages. 

To do that we need to edit the Head.tpl file in our Theme Overrides and then upload that file to our Theme Overrides folder.

Assuming you've used the same file structure as this example you would insert the following at the bottom of your Head.tpl file. 

Code Breakdown:

• The first line loads the CSS style sheet for this plugin. You could also just copy the relevant CSS from this file into your site's CSS file (recommended)
• The second  line <script type="text/javascript" src="resources/js/easySlider1.7.js"></script> includes the 'easySlider' plugin into our site so we can create slideshows
• The third line initiates the plugin and tells it to create a slideshow using the contents of the element with the id '#slider' 

Plugin Options

• We can also set a couple of the options for the slider - namely that it should start automatically and that it will have a continuous set of images. But you could also adjust other settings like the speed, pause time and many others (see below).

Inserting a SlideShow into a page

Finally we can actually insert the slideshow into one of our pages by adding the following lines of code via the HTML button (see Inserting HTML or JavaScript)  to any page on our site .

• Note that the id of the container (e.g. id="slider") must match the name we used when we initiated the slider (i.e., $("#slider").easySlider()...) .  

Final Tweaks and Adjustments

Depending on the design you have in mind you may need to edit the position and size of the slideshow. You may also need to edit the position of the slider elements (i.e. Next/Previous buttons) within the the CSS but other than that the setup should be pretty straight forward. 

Note These tutorials are intended for experienced web designers only. Wild Apricot does not provide technical support for installing or modifying these customizations.