Adding a Nivo Slider animated slideshow – Wild Apricot

On this page:
• Download and upload the plugin files
• Add the slideshow to your site
• Making the images hyperlinks
• Controlling the dimensions of the slideshow
• Other plugin options
• Troubleshooting

You can add an animated slideshow using Nivo Slider jQuery plugin. You can also add an animated slideshow using Wild Apricot's slideshow gadget.

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

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

Download nivo_slider.zip.
Extract the contents of the download file to a location of your choice.
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
Create a new folder under your Pictures folder and call it slider-images.
Upload the images you want to use for your slideshow into this folder. 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.
Click Settings then click Meta-tags under Site settings.
In the Raw headers field, copy and paste the following code:
<link rel="stylesheet" href="/resources/theme/nivo-slider.css" type="text/css" media="screen" /> <script src="/resources/theme/jquery.nivo.slider.pack.js" type="text/javascript"></script>
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:

Begin editing the site page or page template where you want the slideshow to appear.
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.
Within the content gadget, click where you want the slideshow to appear.
Click the S (Snippet) button within the toolbar towards the top of the screen.
Within the code box, paste the following code:
<div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="/resources/pictures/slider-images/image1.jpg" alt="" /> <img src="/resources/pictures/slider-images/image2.jpg" alt="" /> <img src="/resources/pictures/slider-images/image3.jpg" alt="" /> </div> </div> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
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.
Click Save to save your code.
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:

In your Wild Apricot account, go to the Website module and click the Sites pages option.
Begin editing the site page or page template where you want the slideshow to appear.
Click the Gadgets icon to display the list of available gadgets.
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.
After you have inserted the gadget, click the Edit code button within the page settings on the left.
In the dialog that appears, copy and paste the following code:
<div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="/resources/pictures/slider-images/image1.jpg" alt="" /> <img src="/resources/pictures/slider-images/image2.jpg" alt="" /> <img src="/resources/pictures/slider-images/image3.jpg" alt="" /> </div> </div> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
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.
Click the Save button to save your code.
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.

Making the images hyperlinks

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

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

<img src="/resources/pictures/slider-images/image1.jpg" alt="" />

to:

<a href="http://yourlink.com"><img src="/resources/pictures/slider-images/image1.jpg" alt="" /></a>

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

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

.nivoSlider a.nivo-imageLink { background:white; filter: alpha(opacity=0); opacity: 0;}

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.

To add custom CSS code, click the CSS option within the Website module.

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

.nivoSlider {
    width:90px !important;
    height:90px !important;
}

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:

.nivoSlider {
    width:50% !important;
    height:50% !important;
}

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:

.nivoSlider {
    width:50% !important;
    height:auto !important;
}

Other plugin options

The Nivo Slider has several options you can change.

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

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        option: value,
        option: value,
        option: value
    });
});
</script>

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:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade'
    });
});
</script>

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

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Transition effect between images (see below)
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

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:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        option1: value,
        option2: value,
        option3: value
    });
});
</script>

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:

.slider-wrapper{
  opacity: 0.99;
}