There are many ways to display images on your iWeb site, by no means least the default photo page that comes with every theme, but what if you want something different? Lightbox has got to be one of the most popular ways of displaying images on a web-site available at the moment. Not only does it provide a slick way of showing off your photographs or illustrations but it looks really cool to boot. So here is how to add lightbox to your iWeb site in order to create the perfect looking image gallery or portfolio.
Before I start this tutorial, I want to start with a warning. This iWeb tutorial involves editing the HTML code of your iWeb site. Hopefully, you will find the way I have explained it below easy to follow, but if you are not happy with editing the code stick with the default photo page.
The first thing to do, before you even open iWeb is to decide which images you want to display. Gather them all together and stick them in one folder. This step isn’t vital but I found it does make things a lot easier in the long run. When I was writing this tutorial I copy/pasted 4 images onto my desktop.
Once you have your images organized it’s time to open iWeb. Open a new blank page, give it a suitable name (but NOT lightbox; I called mine ‘gallery’) and one by one start adding the images to the page. Size the images to look like thumbnails, add the borders (if necessary or desired) and get the page how you want it to look.
Open ‘Inspector’ and select the ‘hyperlink’ tab (the blue circle with the white arrow). Now one by one add a hyperlink to each image back to itself by choosing ‘A File’ from the drop-down menu and navigating to the folder where you collected all your images (told you it was a good idea!)
Once you have added hyperlinks to all your images, publish your iWeb site ‘to a folder’. This will create your iWeb site and save it on your hard-drive in a location you specify; we do this so we can edit the HTML before publishing to our web host (or MobileMe).
Now navigate to the folder where you saved your iWeb site. Normally iWeb will save it in the ‘Sites’ folder of your ‘Home’ directory. Open the folder that contains your site and you will see a small thumbnail of the page you created and next to it should be a folder of the same name but with ‘_files’ added to it. See my image below for my Gallery page example.
First of all we have to put the lightbox files into our site (see above). All of the files that you need are saved in this archive lightbox.zip which you are free to download. Once you have downloaded it, extract the folder and put it with all of its contents into your site folder (NOT your page’s folder).
Just for your information within the folder you have just downloaded are five individual files;
- lightbox.css – this controls how the gallery styled.
- lightbox.js – this controls how the gallery works.
- 3 x image files to give the gallery it’s look.
You don’t have to edit these files.
So now that you have copy/pasted (or drag/dropped) the lightbox folder into your sites folder it’s time to edit the page you created earlier. There are 3 sections we have to edit in total but they are all a case of adding extra bits of code.
Right-click (Ctrl-click) on the page you created and open it in the text/HTML editor of your choice. I use TextWrangler. The first part of the page is called thesection and this is where the first bit of code must be added to tell your iWeb page that we want to use lightbox.
Scroll down slightly until you see the bit of code , and insert the code shown below on the line above it.
That’s part 1 out of the way.
Just below the end of thesection is the section of your iWeb site and the line should begin:
After the semi-colon you need to add:initLightbox()
so it looks like:onload="onPageLoad();initLightbox()"
And that is part 2 out of the way.
Finally we need to make sure that our image hyperlinks know that we want them to display in lightbox too. This is done by adding a small bit of code to each link.
Scroll down and you should start to see your image links. Each image is separated into its own ‘Div’ and there are lots of height and width measurements followed by a bit of code that starts:
Obviously foldername and image_name will depend on the name of your folders and images, but following this little bit of code (and for each image) you need to add the following bit of code:rel="lightbox"
Once you have applied that to all of your image hyperlinks we are almost ready to view our site. Before we do though, further along from where you just added the last bit of code, and on the same line you will notice a piece of code that begins:title="......
The bit of text that is between the quotation marks is what will show underneath your image when the lightbox viewer is working. You don’t have to change this text, but if you want to give your images individual titles (this also helps with SEO in a very slight way) then now is the opportunity. You can type anything you want in between the quotation marks but try and keep it short and sweet. If you leave it as it is then the path name to your image will be displayed. If you don’t want any caption then just delete the text between the quotation marks.
That is it. You should now have a working lightbox viewer added to your iWeb page. You should save the page in your HTML editor and go back to your site folder. Double-click your ‘gallery’ page and it will open in your default browser where you can test it out. You may well not see the default ‘loading’ graphic as the images are all stored on your Mac and so it is quicker than the Internet (obviously).
You can now publish your site with an FTP app (such as CyberDuck) if you se your own host or by copy/paste (drag/drop) to the ‘Sites’ folder on your iDisk if you are on MobileMe.
If you have followed this iweb tutorial and added a lightbox gallery to your iWeb site, why not leave a comment below with a link so we can take a look.
Want more? Try my ‘Adding Lytebox to iWeb sites’ tutorial too.