JQuery image sliders have been around on the WWW for a while now and they show no sign of going away anytime soon. They are an excellent way of showing visitors to your site the latest news, photos, products and such like in an attractive manner. Adding an image slider to your iWeb site isn’t simple however; you will need to do a bit of code editing outside of the HTML snippet. And of course there is the preparation of the images too.
In this tutorial I am going to show you how to add the fantastic Nivo Slider to your iWeb site. There are comprehensive instructions on the official dev7 Studios web-site, but none specific for iWeb, so lets get cracking.
Preparation, preparation, preparation
As I mentioned above there is a bit of preparation work to do before you start adding the Nivo Slider to your iWeb site. All of the images you want to include in the slideshow must be the same size. In my example I have chosen 618px x 246px but you are free to choose any size you wish, as long as they are all the same; that is important!
I prepared all my images in iPhoto and then cropped them all the same size in Preview, saving each one to my desktop for ease.
To help you even further I have compiled all of the necessary files for this tutorial and added them as a zip file for you to download; the link is at the bottom of this page.
If you take a look at the folder (I called it nivo) you will see there are a variety of folders inside; one for the CSS of the slider itself, one for the images and one that contains all of the scripts we need. You will also see you have downloaded a HTML file. This is the code you need to put into your HTML snippet. If you open the HTML page in your favorite HTML editor and copy all the code, then paste it into an iWeb HTML Snippet the Nivo Slider would work straight away (go on, try it). That is because all of the images and codes linked to within the HTML Snippet are published on the WWW on my demo page.
This is where you will have to do a bit of editing.
If we concentrate on the simple things first, open the folder nivo/images and replace all of the images which are numbered 01.jpg, 02.jpg, 03.jpg etc. DO NOT delete arrows.png, bullets.png or loading.png.
You are not restricted to six images, you can have more or less, it is entirely up to you; I will show you how to add more links to them later.
Now that is done we can move onto the HTML Snippet itself, so open it in your HTML editor of choice. Not all of the code needs changing, in fact the all you have to really do is change some hyperlinks.
If you take a look at the image above (rollover it to make it bigger) you will see 3 hyperlinks to where I have uploaded my files. You will have to change these to match your iWeb site’s URL; they are made up thus:
First comes your site’s proper URL (in my case I have http://allaboutiweb.megabyet.net). Next up is the name nivo, this is the name I gave to my iWeb site within iWeb. Within that site I called the page ‘nivo’ too hence the ‘nivo_files’ in the link. This is followed by another ‘nivo’ which is the folder you downloaded.
So all you have to do is amend the site URL to http://www.yoursitesurl.com then change the first ‘nivo’ to the name of your iWeb site (in iWeb), then whatever name you gave tot he page containing the slider followed by ‘_files’ (ie yourpagename_files); the rest should stay the same.
So in a nutshell it should look something like:
The other 2 links follow the same procedure.
That’s the first bit done.
Now scroll down the page a bit and you will see 3 more links to the images folder, one for loading, one for bullets and one for arrows.
Once again the links are made up exactly the same way as with the first step.
You will also notice within the first section (just above the link to the loading.gif) there are 2 measurements, one for width and one for height. These need to be amended to fit the same sizes as your images.
And finally scroll right down to the bottom of the snippet code, there are more links to change:
Once again, nothing new here, just make the URL match the one for your site. You can see at the end of each line of code there is the opportunity to add a caption if you so need, if you don’t want a caption just delete everything to do with the ‘title’ tag up to the second set of speech marks; you can see in the line of code for the first image that the title tag is missing, so no caption will appear in the slider when it is published.
If you have less than 6 images you can just remove the links that you don’t need. Conversely you can copy/paste further lines if you have more than 6, just remember to edit the name of the image at the end of the link.
Once again, in the 3rd line down of this code you will see measurements which apply to the dimensions of your images; amend these to fit yours (mine were 618px x 246px).
So by now you should have;
- copied your images to the correct ‘nivo/images’ folder,
- changed the 3 links in the top section of the HTML Snippet,
- changed the 3 links to the images in the middle section of the HTML Snippet, and
- changed/added/removed the links to all of your images in the bottom of the HTML Snippet.
You can now copy the code from your HTML editor and paste it into a page in iWeb. It shouldn’t work, if it does then you have done something wrong. You now have to publish your iWeb site to a folder.
Once that is done navigate to the site on your Mac using Finder and find the folder that contains the files for the page that contains the Nivo Slider (ie yourpagename_files). Within that folder paste in the ‘nivo’ folder you downloaded earlier from the link at the bottom of the page.
Now all you have to do is upload your iWeb site (using an FTP application) to your web space. If you use MobileMe you can copy/paste the files to your iDisk. What you must not do is open the site back in iWeb to publish as this will get rid of the ‘nivo’ folder you just pasted in.
And that is all you need to do. Your Nivo Slider enabled iWeb site should now be firing on all cylinders. You can see on my demo site that I have added a frame to my Nivo Slider. I did this after publishing it for the first time. I you open the page up in iWeb once again after publishing (and providing you have got all of your links right) your Nivo Slider will work within iWeb (clever eh?) You can now draw a rectangle around the image window and, within iWeb’s Inspector image tab, set the fill as ‘none’ and give it the frame of your choice to fit your site.
You should now be able to publish from iWeb now, I tried and the nivo folder that was uploaded the first time wasn’t deleted. If you find that your nivo folder does get wiped out then you will have to publish to a folder again, copy/paste the nivo folder back in the correct place and then publish with an FTP app.
I hope you find this tutorial useful, if you have any questions about it please leave a comment and I will try to help. Alternatively if you use it on your iWeb site leave a comment with a link so we can all take a look.
You can download the Nivo Slider files along with the HTML Snippet code here.
You can take a look at the Nivo Slider working in iWeb here.