Strathview Consultants

Introduction

This page will provide some guidance in implementing the excellent Nivo Slideshow from http://nivo.dev7studios.com/ into a wikidot site. The areas that need to be looked at are:

• page
• files
• wdfiles domain
• html code
• CSS
• static image
• live templates
• slideshow options

The live version of this slideshow is at http://www.strathpeffergolf.co.uk

Page

It is best to have the html code, the nivo CSS, the javascript files and the image files for the slideshow on their own holding page and then use an include to put the finished result where you want it. I usually call the holding page slideshow:banner but it can be any name.

Files

For performance reasons you must not link to the jQuery files on another site but upload the files to the holding page.

The files you will need are jquery-1.4.min.js (or the most recent release) and jquery.nivo.slider.pack.js. The files are available from the nivo website or can be copied from the files option at the bottom of this page.

Using the wdfiles domain

In the html code you will provide a link to the javascript files and the image on your holding page. Normally this will be in the format <script src="/local—files/support:jquery-nivo/jquery-1.4.min.js" type="text/javascript"></script>.

But because it then has to look for the wdfiles domain for the file it can introduce a slight delay which might make the slideshow stutter. The same issue applies if you use your custom domain in the address. In this case you might need to use the full wdfiles.com address instead of the wikidot.com domain, for example

<img src="http://strathviewconsultants.wdfiles.com/local--files/support:jquery-slideshow-nivo/1.jpg" alt="Picture 1" Title="Picture 1"/>

Nivo CSS

The css for the slideshow is shown below. I have used a slightly shorter CSS than the nivo original as I don't need the direction arrrows or bullets. The CSS goes at the beginning of the html block on your holding page:

[[html]]
<style type="text/css">

#slider {
    position:relative;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
}
.nivoSlider {
    position:relative;
    margin:10px auto;
    -moz-box-shadow:0px 0px 10px #333;
    -webkit-box-shadow:0px 0px 10px #333;
    box-shadow:0px 0px 10px #333;
    height: auto;
    width: auto;
    overflow: visible;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}

.nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
}

.nivo-caption, .nivo-caption p, .nivo-controlNav, .nivo-controlNav a, .nivo-directionNav a, a.nivo-nextNav, a.nivo-prevNav, .nivo-controlNav a.active, .nivoSlider a.nivo-imageLink {
    display: none;
}

</style>

HTML Code

Underneath the Nivo CSS in your html block goes the html with the location of the javascript files and the images for the slideshow:

<script src="/local--files/support:jquery-nivo/jquery-1.4.min.js" type="text/javascript"></script>
<script src="/local--files/support:jquery-nivo/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<div id="slider">
    <img src="/local--files/support:jquery-nivo/header1.jpg" alt="Strathpeffer Golf Image 1"/>
    <img src="/local--files/support:jquery-nivo/header2.jpg" alt="Strathpeffer Golf Image 2"/>
    <img src="/local--files/support:jquery-nivo/header3.jpg" alt="Strathpeffer Golf Image 3"/>
    <img src="/local--files/support:jquery-nivo/header4.jpg" alt="Strathpeffer Golf Image 4"/>
    <img src="/local--files/support:jquery-nivo/header5.jpg" alt="Strathpeffer Golf Image 5"/>
    <img src="/local--files/support:jquery-nivo/header10.jpg" alt="Strathpeffer Golf Image 10"/>
    <img src="/local--files/support:jquery-nivo/header6.jpg" alt="Strathpeffer Golf Image 6"/>
    <img src="/local--files/support:jquery-nivo/header8.jpg" alt="Strathpeffer Golf Image 8"/>
    <img src="/local--files/support:jquery-nivo/header9.jpg" alt="Strathpeffer Golf Image 9"/>
    <img src="/local--files/support:jquery-nivo/header7.jpg" alt="Strathpeffer Golf Image 7"/>
    <img src="/local--files/support:jquery-nivo/header11.jpg" alt="Strathpeffer Golf Image 11"/>
</div>

Slideshow Options Code

The last part of the html block contains the options for thee slideshow. The different parameters are described later on this page:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade',
        slices:30,
        animSpeed:1500,
        pauseTime:8000,
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:false, //1,2,3...
        pauseOnHover:false, //Stop animation while hovering
        beforeChange: function(){},
        afterChange: function(){}
    });
});
</script>

[[/html]]

CSS

If you are using the slideshow as a banner at the top of your site the site should use a fixed width rather than a liquid design.

As well as the nivo css you will also need to add a CSS class to your own custom CSS, particularly if you are using the slideshow as a banner. You cannot place the slideshow directly into the header rule as you can with a background image, so it has to go in as part of the content and then the new class uses absolute positioning to put it in the right position. I usually find that the positioning needs separate adjustment for IE7 although for Firefox, Chrome, Sarari and IE8 the positioning is the same. (Note: the slideshow doesn't work at all well on IE6). You will probablt find that getting the positioning right is something that takes considerable trial and error.

The properties and values I used for the Strathpeffer Golf Club site are shown below but will need to be adjusted for your site:

.slideshow {
    height:300px;
    margin-left:-60px;
    margin-top:-469px;
    margin-top: -484px !ie7!;
    position:absolute;
    width:932px;
    z-index:99;
}

Static Image

It can take a couple of seconds longer for the slideshow to load than it would take a static image. So what I do is to also put the first image as the background image in the #header rule in my CSS. That way the image appears and then the slideshow goes over it and starts to play and it should be a seamless transition.

For this to work you will need to:
* have the z-index:99 in your slideshow class so that it displays in front the background image;
* make sure the header background image is positioned in exactly the same place as the slideshow will appear

The other benefits of doing this are that if someone has javascript switched off on their computer they will still see the static header image, and for the thumbnails of each site on wikidot.com or in the bottom toolbar the header image will display instead of a blank space.

Live Templates

At the beginning of the page I said to put all the code and files on their own page. I then put an include into live templates for the different categories of the site and wrap it in a div using the slideshow class, as follows:

[[div class="slideshow"]]
[[include slideshow:banner]]
[[/div]]
%%content%%

What this does is actually include the slideshow banner as part of the page content but the slideshow class moves it up into position as the header.

The advantage of this method is that if you don't want the slideshow to run for certain categories (perhaps the admin, css and slideshow categories) you just don't create a live template and the static image will show.

Slideshow Options

There are a number of different options that you can set for the slideshow in the code above. The ones you are most likely to use are:

• effect:'fade', - or: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random
• slices:30, - this number can be varied to suit
• animSpeed:1500, - the higher the number the slower the transition between images
• pauseTime:8000, - the time each image is displayed for, so a higher number displays the image for longer