In May this year I published what has turned out to be a rather popular iWeb tutorial on how to add Lightbox to your iWeb site. I have been contacted many times since (and there have been quite a few comments made too) about adding Lightbox 2. Last night I spent 5 hours trying to get Lightbox 2 working with an iWeb site and have come to the conclusion that it doesn’t.

There are loads of Lightbox clones available to download on the Internet, but I needed to find one that did what Lightbox 2 does and was easy to install. After a while I found a little code called Lytebox which turned out to be perfect for the job.

So after much head-scratching and deliberation I have finally managed to get this iWeb tutorial together for you so that you can have a go at adding Lytebox to you iWeb site.

Before I start, what’s the difference between the original Lightbox and it’s later version? You can now have image sets; rather than individual images which basically means that you can assign relevant images to groups. This means that if you have classed a group of images together as a ‘set’ when a user visits your Lytebox gallery and views your images, when they hover over an image a little arrow will appear which they can click on to go to the next image, rather than close the Lytebox window down. In addition there are some new transitions. It is the fact that you can create image sets that I am going to concentrate on in this tutorial; you can get the single image effect with the first version of Lightbox.

As with my previous tutorial I will start by giving the warning that this tutorial involves editing the HTML code in your iWeb page directly. If you don’t want to do it then look away now!

Much of this tutorial is similar to my initial Lightbox into iWeb post so bare with me.

Start by collecting together all of the images that you want to have in your Lytebox gallery in one place; I chose the desktop of my iMac. They should all have something in common as you are going to create an image set from the whole collection.

Open iWeb and create a new page for your image gallery – remember DO NOT call the page Lytebox. Now one by one add the images to your iWeb page and style/arrange them so that you have your iWeb page looking exactly how you want it.

There are lots of border options to choose from under the ‘Graphic’ tab in Inspector.

Now that you have Inspector open select the ‘hyperlink’ tab (that’s the one with the blue circle/white arrow icon on it). Select the first image and create a hyperlink to the image that is on the desktop by adding a tick in the ‘Enable as a hyperlink’ checkbox , selecting ‘A File’ in the ‘Link To:’ drop-down menu then navigating to the image using the normal ‘Finder’ way.

Once you have done that you need to publish your iWeb site ‘to a folder’. This saves your site to a location you specify on your Mac’s hard-drive; this is done so that you will be able to edit your HTML.

In ‘Finder’ navigate to where you saved your iWeb site and open it’s folder. It is at this point we add the Lytebox files. Point your browser to dolem.com and download the Lytebox zip file. Once that’s done extract the folder ‘Lytebox_v3′ and then open it. There are 2 files and one folder inside so drag/drop them into your site’s folder. Remember, your site’s folder not your page’s folder.

Once you have dragged/dropped it is time to get down n dirty with some HTML so open your gallery page in your favorite HTML editor. As I have mentioned a few times on this blog I like to use TextWrangler from BareBones Software.

A quick lesson in web pages: A web page is made up in 2 parts, the ‘head’ section and the ‘body’ section. The head section contains parts of code that your web page needs to work, such as links to CSS files, meta-tags, links to Javascripts and the like. The body section contains the code that (in a nutshell) is your page; all of the content (text, images etc) and in which divs it should appear.

We are going to be adding some links back to javascript in the head section of our gallery pages and a bit of code to the content (in this case images) in the body section.

Once you have your web page open (mine was obviously the one called ‘gallery.html’) in an HTML editor scroll down a bit (or do a search) for </head> within your code.

When you have found it, paste the following code into a new line above it.

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

You have now inserted the code that tells your iWeb gallery where the javascript is that will make it work and where the CSS is that will make it look good.

And that is the end of Part 1 – I told you this was easy.

The next thing we have to do is add a bit of code to each of the images to activate them; make them work in Lytebox.

Scroll down your page and you should start to see the sections of code that relate to your images.

In the previous tutorial we added the bit of code ‘rel=”lightbox” ‘ to each link and we will be doing the same again in this one. However there is a twist. Because we want to use an image set we have to add a little bit more. So after the part of the code that lays out the source of the image insert the following code.

rel="lytebox[imagesetname]"

Obviously the name of the image set (imagesetname) depends entirely on you so you can change it to what you want. In my example you can see that I called my image set ‘graffiti’.

Carry out this step for all of your images.

Once again, as with the previous lightbox tutorial you can also add a ‘title’ tag to the code which will show up as a caption in the lytebox gallery. Just add the following code after the previous snippet:

title="my caption goes here"

You may notice that iWeb has already added the title tag for you, if that is the case just amend the text it has given between the quotation marks (by default it is normally the path to the image).

Now save your page. That’s it, you have finished…..almost.

You can test it out by opening the page in your browser of choice. You probably won’t see the loading image as all of the images are saved on your Mac rather than the internet but there would be one there by default. You can see in the image below the ‘next’ button that appears when a user hovers their mouse over your gallery.

You can now publish your site as normal, either using an FTP client if you have a private host or by simply copy/pasting the files into the relevant folder within  ’Sites’ on your iDisk if you have MobileMe.

If you have inserted a Lytebox gallery into your iWeb site why not leave a link in a comment and let us take a look.