Premium Templates
Image Galleries
Image Effects
Video Players
Audio Player
Other Effects
Copyright © Flying Cow Labs All Rights Reserved.
Website crafted using the Serif Software Suite
If you’ve found these tutorials useful please help the world's poorest communities
by making a small donation to WaterAid -
Nivo Slider
Nivo Slider is the massively popular jQuery image slider brought to us by Dev7studios.
Visit the home page for Nivo Slider.
You will find this image slider used on a huge number of websites throughout the
Internet, and that includes our recent template site: Unearthed -
1. Download the zipped file. It includes all the files needed and a single paged WebPlus file so you can see how the code is incorporated in a WebPlus website.
2. Click on Tools in the WebPlus workspace > Site Manager > File Manager > Click ‘New Folder’ This will place a new folder in the Root of the site, name it ‘nivo’ then create additional files branching off it. Name the new files ‘images’, ‘js’ and ‘css’.
Click on the ‘images’ file and then ‘Add’, navigate to the downloaded files on your computer and upload the images from the ‘images’ file. Do the same for ‘js’ and ‘css’ this embeds the files in the WebPlus website file and because of this, when you preview the site in your browser you can see whatever code you are playing with without having to upload it to a server ;)
Alternatively, you could use Filezilla and simply drop the ‘nivo’ file in to the Root of your server.
View the file tree and it should look like this!
4. Next, insert the following CSS in to the head of the site. For this you will need
to bring up the websites HTML. Press Alt + S and navigate to the section below the
sites css (it’s about 8-
3. Include the following script in the head of the master page or the page you wish to display the picture gallery.
Copy to clipboard > Insert > Web Object > HTML > Paste to Head.
#slider {
position:relative;
width:618px;
height:246px;
background:url(nivo/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-30px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(nivo/images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(nivo/images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
.clear {
clear:both;
}
Previewing the page in your browser should now display a working Nivo Slider!
Animation Options
There are many animation options that can be set directly in the code already pasted to the head and are labelled to explain what they do.
The effect parameter can be any of the following:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
Adjusting the Slider Size and Adding Images
Firstly, you will need to size all your images to the same dimensions in photo editing software, photos of differing sizes will make the slider act crazy so it’s important to use same size images.
Add your images to the ‘images’ file found within the ‘nivo’ file, naming them ‘01.jpg’ etc will save you having to change much of the code in the HTML Code Fragment on the page. You can add more images by simply duplicating the line of code in the HTML and as you can see a caption can be added to this.
5. Next we’ll be adding the HTML Code Fragment that will sit directly on the page. Placement of the code fragment will effect where the slider is situated on the page.
Copy the following code to your clipboard, then in the WebPlus workspace click > Insert > Web Object > HTML > Paste to Body
#slider {
position:relative;
width:618px;
height:246px;
background:url(nivo/images/loading.gif) no-repeat 50% 50%;
}
If you’ve made radical changes to the overall slider dimensions it will be necessary to relocate the navigation buttons and arrows, this is again done through the CSS code inserted in the head of the site.
It can be a case of trial and error; make some adjustments, preview and see what it looks like.
The sections of code that determine where the buttons and arrows are placed on the page are shown below and I’ve highlighted the parts that may need changing.
For the button:
.nivo-
position:absolute;
left:260px;
bottom:-
}
For Alignment of the Arrows:
a.nivo-
background-
right:15px;
}
a.nivo-
left:15px;
}
If you have any additional questions or are having troubles adding Nivo Slider to your site you can visit the Serif Addons Forum and post your requests there.
Next adjust the dimensions in the CSS code attached to the head of the site page via Alt + S.
Set the width and height in the following section:
