11 Apr 2011

How to add the Nivo Slider to your iWeb site

46 Comments Tutorials

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:

http://www.yoursiteurl.com/yoursitename/yourpagename_files/nivo/css/nivo-slider.css

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.

Tags: , , ,
written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb
Related Posts

46 Responses to “How to add the Nivo Slider to your iWeb site”

  1. Reply Peita says:

    Wow, thanks Tim!!
    I am not sure I am nearly proficient enough to use all this code just yet, but have noted it down ready for when I am. You have taken a great deal of time to lay this out well, and we really appreciate it!

  2. Reply Marvin says:

    Will this work on iweb 08?

  3. Reply Felix says:

    Its pretty cool, but the only thing that I dislike about it is that the picture have to have the same size. Besides that the Nivo Slider is pretty sweet!!!

  4. Reply Jamie Wilkinson says:

    I cant find my site folder in the finder to add the folder i downloaded? when i search iweb in the finder it brings up the application and not my specific website folder. I have not yet published the site and was wondering if this may be the reason i cant find it? thanks Jamie

  5. Reply Scott says:

    I don’t understand what you mean by upload files to iDisk, iDisk doesn’t allow folders to be uploaded only individual items, I host from MobileMe and am having a hard time with the last steps. Please help, thanks Scott

  6. Reply Katie says:

    Hi, I’m a web designer using iWeb, and one of my costumers really wants this on his page but I just can’t seem to get it to work at all (after spending hours trying). The site I’ve got up is only temporary while I get the new one done, but I have been testing the nivoslider on the gallery page (unsuccessfully) you can take a look at the code if you like the website is http://www.dripdropdriveways.co.uk

    Thanks so much, hope you can help!

    Katie

  7. Reply Rafal says:

    Hera’s what I’ve come up with (it’s still in beta, and in polish, but its mostly images, so it doesn’t matter that much):
    http://bit.ly/e2pI3N

  8. Reply Rafal says:

    Thanks Tim!
    Of course IE butchers it (footer gets messed up) and there’s a little bit of inconsistency between Firefox for Mac and PC. Only Chrome and safari are the major browsers that display it exactly right. Would you know any decent read about cross-browser compatibility for iWeb by any chance?

  9. Reply Joseph says:

    hey i was interested in learning how to add this image scroller to my iweb webpage http://www.flashxml.net/image-scroller.html#swmi-free-install Can someone please help me?

  10. Reply Luuk says:

    I’ve done every direction you gave me, cant get it to work… Guess i’ll have to try again later tonight :(

  11. Reply Luuk says:

    Really cant get it to work. Hope you can help me.

    I change the URLs to http://www.innovation-films.com/main/main_files ( website name, site name in iweb, pagename in iweb )

    Change the measurements and follow every direction, it just wont appear..

    • Reply Jonathan says:

      ok so here is what is happening Luuk, the first thing you need to do is to create the images I recommend save them as .gif file it still work, then before you work with the widget modifications upload all your files to your server so by the time you are telling your widget where to get all info the info images and files are on the web, regarding the size what I found is that Tim make his images 618 px by 247px so what you need to do if you make your images larger or smaller is wherever you see those numbers in the html code replace them for the size of your images, the second thing you need to do regarding size is that Tim added 82 pixels more to the 618px which make it 700px wide and he just make the widget 700px high this is What I did my images are 1187px x 287px wherever I saw the 700 px number I exchange it for the value of my image plus 82 pixels which make my widget not 1187x 287 but instead it make it 1269px x 369px.

  12. Reply Luuk says:

    In your tutorial you say you cant delete loading.png, but the file is actually a gif, correct?

  13. Reply Bruce says:

    Bullets and arrows missing?

    Firstly thanks for this tutorial without which I would be totally lost!

    I solved this problem by publishing my site to ftp USING iWeb to publish (this is not to be done according to this tutorial).
    Then I used a third party application (cyberduck ftp) to drop the ‘nivo’ folder into the appropriate page folder on my website hosters ‘control panel’. This folder is what your HTML snippet should already have been adjusted to reflect, just as the tut instructs.

    Reply here if you need anymore help

    • Reply jey says:

      I’ve done all on the tutorial & what you’ve suggested, still just getting a box on iWeb, i hAVE done other sliders, like the beautiful j query & had no problem, plz help, ty

  14. Reply Don says:

    Hi. I was able to get the slider to work, but it was justified Left. I could move the slider so the pics appeared to be centered on the page, but then the buttons below it were off center. I’m not well versed in HTML, but I did find it the code (near the button) where it appears to be setting the left justificaiton. Is there a way to change this to center?

    • Reply Jonathan says:

      If you change the values to the slider images you need to search for this numbers and word in the html code and exchange them basically play around with them untill you find the center
      originally the widget is like this

      }
      .nivo-controlNav {
      position:absolute;
      left:260px;
      bottom:-30px;
      well I change the values and make it work specifically for my image’s size
      }
      .nivo-controlNav {
      position:absolute;
      left:480px; this value change its alignment horizontally
      bottom:0px; and this change the aligment vertically

  15. Reply Ray Junior says:

    Thanks so much for this tutorial. I was able to get it to work on the first shot. However, I do see why some people are having a few issues. Your instructions are excellent for someone with lots of experience doing this like me. But there are a few places where you make some assumptions and leave out some minor (but important) details. It’s obviously not intentional, and this is such great info that I don’t want you to think I’m complaining. Certainly not – you did a fantastic job so thanks.

    I do have one question though: is there a way to make it so each image that comes up can also link to another page?

  16. Reply Jeff N says:

    I’m working on putting the slider code into my homepage. I don’t want the navigation, arrows, or bullets. I just want the slide show to play without any viewer interaction. How do I remove these elements?

    thanks
    Jeff N

  17. Reply Jeff N says:

    Still working on it…. how do I pick which transition I want in the slider?

    thanks

    Jeff N

  18. Reply hdAv says:

    Any chance that you could advise on how to get the thumbnails working as on dev7studios version.

    I have tried following the instructions on their site regarding how to do this but I am getting stuck with exactly where to place the CSS changes.

    Any help would be great.

    Thanks.

  19. Reply Des says:

    Way cool, thanks Tim! See it on my site here: http://desong.co.uk

  20. Reply David says:

    Hey Tim I’ve got the same problem as Luuk, my URL is as it is supposed to be and cannot get it to work, i followed every step, changed the pictures, but still no nivo slider in my webpage. My URL turned out to be http://casajuventudraleigh.tk/www.casajuventud.com/Campamento_files/nivo

  21. Reply Kimberly says:

    Is there a way to add links to each image to interior pages of my site? I got the slider to work thru iWeb with the site I built. Great instructions !!!!! But I don’t know where to add the link (URL) that I want the image once clicked to point to…. any help would be greatly appreciated.

  22. Reply Jonathan says:

    Well I got admit it I did struggle a bit to get the code work for me but I finally figure it out, thank you so much Master Tim, you made my website look way better :) , I see here in the comments that people is having the same problems I had I will try to do a video upload it to youtube and give you all the credit for it and try help the rest of the people here is what I came out with I still working on the website but this gonna look something like this http://www.munozplastering.com with no titles and http://munozplastering.com/Water_Damage.html with titles

    • Reply jey says:

      did you ever finish the video tutorial. I’m having trouble with this. Ive done other html sliders, but having trouble with the NIVO…

  23. Reply Oscar says:

    I’m hoping someone here can help me – I got the slider to work perfectly when I published to a local folder, but when I published online, it’s gone. I’ve rechecked the code and can’t find the problem. I made sure that the nivo folders were updated to the server and they are. If anyone has any ideas, I’d really appreciate it.

    Thanks for this outstanding website – extremely helpful.

    • Reply Oscar says:

      Solved! My hyperlinks were wrong. Drove me crazy all day today. Thanks again for the fantastic site – extremely helpful to many people, I’m sure.

  24. Reply Spikey says:

    Hi Tim,
    No joy I’m afraid…
    When I go to copy the NIVO folder to iDisk I get the dreaded “error 36″ message. I’ve tried the “dot_clean” command in terminal and still the folder won’t copy…
    Any ideas?

  25. Reply Peter says:

    Hello, maybe somebody can help me out.
    I put the Nivo slider on my website.
    But i think that my server can’t handle one effect (the blocks falling down).

    The other effects are no problem.
    Is is possible to use one or 2 effects by changing the snippet?

    Thanks!
    Kind regards

  26. Reply Nick says:

    I keep trying to get this on my site, but it never works. I’m fallowing the directions, I edited the html to go to the proper places but I just can’t seem to get it to work and I don’t know what I’m doing wrong. I’m assuming after you add the nivo folder to your published site folder, you then need to upload your site folder with an FTP uploader, so I did this and my hosting site shows that the folder is there but when I try to view the webpage nothing shows up. I’m really at a loss, I stayed up all night working on this thing doing everything I can to get it to work, but it just won’t. Any help would be greatly appreciated.

    PS: LOVE the site.

  27. Reply Karen says:

    Hi Tim
    I can’t get past the first step. I uploaded the html file to text wrangler html edit I copied the full code and pasted it into an html snippet on an iWeb page and all I got was a rectangle box with no content. I published to a local folder to see if anything would show up and nothing. I put the downloaded folders on my desktop for easy access do these folders have to be put on idisk in order to work? and idisk does not allow uploading of folders – please help
    thanks!!

  28. Reply Ale says:

    Hi! thanks for this tutorial it was just what I was looking for.
    I tried to change the size of mi photos and the position of the slider got of the center. How do I get it back to the center?

  29. Reply Emin says:

    “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). ”

    - i tryed – it doesn’t worked.
    exactly what i did – opened the html “nivo-slider-code.html” with TextEdit, then copied the full code and pasted it into iWeb’s HTML-Snippet and clicked apply – what happened? – a white empty rectangle box. What is the reason?
    Would love to hear a solution.

  30. Reply Karen says:

    how many people got this to work ?

  31. Reply ibrahim says:

    simply you forgot ……… rename the file to index.html..
    every one knows the reason toooo

  32. Reply sgrobins says:

    I can’t get this to work. I opened the .html page in Text Wrangler, copied the code, and pasted it into an HTML Snippet on my iWeb page. It doesn’t show any photos–it just makes an empty box. I then tried substituting my information for yours and I pasted it into the HTML Snippet, but when I published, it messed up everything on the page. What am I doing wrong?

  33. Reply Marcel says:

    I’m doing a test on my mac in iweb and it seems to do it correct but on my windows (xp and 7) he can’t find the slider is there a solution?

  34. Reply Rick says:

    Marcel can you write down in detail what you did on your Mac – I have a Mac and I have yet to get this thing working I wish someone would just give a step by step assuming nothing ???? on how to make it work
    Thank ANYBODY that this is working for

  35. Reply Dave says:

    Great tutorial! Working fine with a little edit to the tutorial. Here’s what I had to do to make it work for me.

    For whatever reason my “home_files” folder was located outside my “DLDRUMS” folder on my FTP file manager. It was in the root folder with all the other files for the different pages of my site. So the slider didn’t work for me until I removed “DLDRUMS” from the path below.

    http://www.yoursiteurl.com/yoursitename/yourpagename_files/nivo/css/nivo-slider.css

    One question though, is there any copyright with this slider feature? Would like to use on another site that is commercial but not for profit.

    Thanks for the tutorial.

    Dave

  36. Reply Dave says:

    Works great! Any copyright associated with the files used in this tutorial? Just wondering.

    Thanks for info.

    Dave

Leave a Reply