SoftwareTutorialsWeb Design

Add lightbox to your iWeb site

lightbox_in_iweb_iconThere 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.

insert_images_into_iweb

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!)

hyperlink_inspector

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.

insert_lightbox_folder

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 the <head> section 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 </head>, and insert the code shown below on the line above it.

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

The code inserted into iWeb's head section

That’s part 1 out of the way.

Just below the end of the <head> section is the <body> section of your iWeb site and the line should begin:

<body style="background.......

Further along that line is the following code:

onload="onPageLoad();"

After the semi-colon you need to add:

initLightbox()

so it looks like:

onload="onPageLoad();initLightbox()"

The code inserted into the Body section of iWeb

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:

<a href="foldername/image_name.png".......

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"
The edited image hyperlink

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.

An example of an amended title

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.

Lightbox working in iWeb

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.

You may also like

70 Comments

  1. […] Read more: Add lightbox to your iWeb site | All About iWeb […]

  2. Is there a way to define the size of the popup image? If it’s 800×600 or 200×100 it still pops up VERY large.

    1. Wim,

      Good question. I took a look at the CSS and the javascript but can’t find anything. I will ask my much more geeky brother to take a look though.

      Tim

  3. Hi and thank so so much for this, i have a question.
    is there by any chance configure the size of the image?
    some of them are very very big

  4. I chose an album page for one of the pages on my site. Of course when clicking on one of the albums, a photo page opens. Can I use lightbox to create a page to replace this photo page so that the thumbnail images aren’t displayed in grid format?
    Thanks!!

    1. Michelle,

      It may be possible, but not with this script. There are many ‘Lightbox’ clones available on the internet, you may want to give one of them a try instead. The installation method should be the same. Lightbox is an image viewer rather than a page view.

      Tim

  5. Hey, nice blog. Some really good tutorials coming out. Love this one about Lightbox.

    Keep up the good work.

  6. Whoa… this site is pretty awesome 🙂 your layout is really well designed, and your blogs are (judging from what i’ve read) very interesting. heehee… consider yourself favorited. 😛

  7. I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.

  8. Hey. Lightbox worked very well except when you click on the photo, the picture is huge! it takes up the entire page. How do I fix this?

  9. Thank you for your kindness and helping all of us less informed iWeb designers. Your work is appreciated.

  10. Hi folks,

    Can I get some more specifics on the problems with image sizing? I take it that the image is displaying bigger than it actually is, i.e. it is being stretched by the Lightbox? I ask because it could be something as simple as the image just being big!

    Images from modern digital cameras, for example, are often very large straight off the bat, and really need to be resized before you use them online. Let me know the exact situation and I can look at the code and see what might be going on.

  11. Hi, thanks for another great tip – I’ll be giving this a go in the morning.

    I assume the html editing would have to be done each time you publish the site, as with other html editing in iWeb?

    Another job for MassReplaceIT?

    Regards

    Darren

    1. Darren,

      If you use an FTP application such as Cyberduck you only need to publish changed pages if you want so you don’t have to redo the HTML unless you change that particular page.

      I hope that helps,

      Tim

  12. I set it up. Worked great on my Macbook.
    I zipped the site file that mac creates after you publish it and emailed it to my wife to view on her mac. The Lightbox attributes do not work at that point. The thunbnail just pops up on a new page. So I tried it on another machine here at work. It is a windows machine ( IE 7 ) and it does not work either.
    Any suggestions regarding how I can “test” it by emailing to my wife so she can she what lightbox does. Why is this happening? We were both using SAfari on our Mac’s BTW.
    Thanks

  13. Me again. Looking at the HTML source code all the edits I made to the html are gone now. Rookie mistake…I saved the page??? Wha’ happening?

  14. Hey there this works for the old V of lightbox, But when I use the new V (2.4) It’s not working

  15. Hi Guys,

    I presume that this little java app should make the picture show up on the main website as if it was floating like and the webpage in the background but faded out like in ur picture above but when i run this and click on an image i get the picture and then a white box around it as if it opens a new webpage am i doing anything wrong?

  16. Hey Big Man and Alan,

    The new version of Lightbox downloads with a folder called ‘Lightbox 2’. Re-name the folder to ‘Lightbox’ and you’ll be pleasantly surprised.

    I’ve just stumbled across this website today, its awesome. Keep up the great work! Thank you, thank you, thank you!

    Tim – have you used iWeb Buddy, whats your thoughts?

    1. Hi Greg,

      No I haven’t used iWeb Buddy. I took a look at the application when I did my Addons post a while back but can manage to do all of what it can do myself without having to spend $25. Perhaps I am too tight!!

      Tim

  17. Greg,
    I tried the lightbox 2 folder and it didn’t work… when looking at the contents it would appear that they are laid out differently. Does anyone have any thoughts, I can’t get it to work and I need something a little more current.

  18. hello..i cant get this to work on my site either..when i click on the image in my gallery, it just takes me to another page with the larger image on it. i really need help with this. if you could email me away from this site i would really appreciate it.

    ringo walton

  19. Everything worked perfectly for me. BUT, does anyone know if i can intergrate a lighbox that can show multiple images in that window? I want to showcase “one” thumbnail on my page, and showcase multiple images within the lightbox, in order to avoid multiple thumbnails on my page.

    Does anybody have recommendations or tips?

    Feedback needed urgent and is highly appreciated 🙂
    Thanks in advance!

  20. Several problems bore me

    Before all, I am French and my english is not the better. So forgive me if I do some mistakes.

    First. I dowloaded the folder “Lightbox 2.04” but I do not know where I have to put the files. I created a little website to test it, but I do not know where for exemple “prototype.js” has to be put. And all others.
    No one shows where somewhere on Internet.

    Then, I followed (I do not remenber if “follow” is an irregular verb…) the tutorial here :

    http://www.lokeshdhakar.com/projects/lightbox2/

    But after few hours, nothing.
    When I click on the pictures, I have an other page, or a strange thing happens : the windows grow again and again…
    I could say the tutorial it is not very clear because I do not know exactly where I have to include the lines code.

    And finaly, I tried this tutorial :

    http://allaboutiweb.com/index.php/2009/05/add-lightbox-to-your-iweb-site/

    Unsuccesfuly again.

    I am tired and I do not understand very well how the scripts woks.

    So, please help.

    PS : If you want, I would show you the code.

    1. Ostra,

      Thanks for your comment. Sadly my tutorial is not for Lightbox 2. I have noticed that it has been mentioned a lot in the comments to this post though so I shall take a look at it and post a new tutorial soon.

      A Bientôt

      Tim

  21. it would also be helpful if you show an example of how to put multiple images into one lightbox. And how to use lightbox2 with iWeb.

    1. Christopher,

      Thanks for your comment. What you are asking for is one and the same thing. You need Lightbox 2 to add multiple images to the 1 lightbox. I will be covering this soon, once I have finished mucking about with iWeb themes.

      Tim

  22. I have been working this for awhile now and if I just access my gallery.html file and open it in my browser (Firefox and Safari) I can see the javascript in action. But, if I upload it to my server and use one of my sub-domains, it will not work. It only opens in a new window. Can you check this out and see what I am doing wrong? My most recent one is located at “test2.nealsrealdeals.com”

  23. Never mind. I just figured out that the permissions on my files were to restricted.

    But if anyone knows how to use Lightbox2 with iWeb please let me know. I have been trying to get it to work but I don’t really know how to integrate “lightbox2” css file with the default css file.

  24. Hi Tim,
    You have helped me out so much in the past, and thank you for that, my friend’s site is up, but I am still tweaking a bit.
    Tried your tutorial, but I am clearly doing something wrong, when I click on the image, it opens a separate page, instead of the lightbox.
    I am trying to create the lightbox in the “our products” page, to enlarge each image at the bottom.
    Any suggestions?

    1. Shelly,

      Thanks for the comment. I just took a look at your ‘Products’ page and can’t seem to find any of the code you should have amended. Have you republished?

      Tim

  25. I tried this today and it works great. Except I would like to be able to size the lightbox window the picture appears in. I guess I could do it prior to using the pics by cropping them in photoshop but I don’t want the extra step. I’d rather manipulate some code.

    I had an issue like some are reporting where I’d click on my photos and they’d just open up in a new browser window instead of triggering the lightbox. I went back through my code and found that I had inserted the “initLightbox()” code into the place that said “onPageUnload” instead of “onPageUpload”. They’re right by each other on the same line of code and look very similar. I changed mine and it worked right away.

    Nice tutorial!

  26. I fought with lightbox2 in iWeb for a while and eventually gave up. However, the “lytebox” version works great:

    http://www.dolem.com/lytebox/

    If you can get lightbox (original) to work in iWeb and you want the features of lightbox2, then I recommend lytebox.

    1. Fletch,

      I agree with you, Lytebox can do so much more, that’s why I wrote a tutorial back in September:
      http://allaboutiweb.com/index.php/2009/09/iweb-and-lytebox/

      Tim

  27. hi Tim

    will open correctly from my folder on my mac but just opens on a new page on the site.

    any ideas how to fix?

  28. hi Tim

    just tried the other Lytebox and exact same problem will open correctly from my folder on my mac but just opens on a new page on the site.

    any ideas how to fix?

  29. never mind seems to be ok now lol

  30. Good stuff! worked for me!..thanks a lot….but publishing from iWeb removes the existing litebox code! Is there a way for it to remain when publishing from iWeb.?

    Thank you

    1. Mohammed,

      No I’m afraid there isn’t. You have to use a 3rd party FTP app (like CyberDuck) or edit your files directly from MobileMe

      Tim

  31. Hey I added all the additional information after published to a local file. I then copied all the files to my idisk. However when I try it out, it only opens the file larger instead of floating. Any ideas?

    Thanks for your help.

  32. You clever, clever man.
    Thanks a lot, this is exactly what I wanted to do on my site.
    All done flawlessly thanks to your excellent instructions.

  33. Thank you soooooo much for this information!!!! It helped me out and saved me from more frustration! 🙂

  34. Thanks so much, it working great except for one small problem.

    When you click on an image int functions properly, the large image appears and the background fades to black.

    Is the large image supposed to allow you to click through without having to go back to your thumbnail gallery. You know, where two arrows (previous and next) appear?

    If someone can tell me how to do this that would be great, I hope i did not do something wrong.

    Thanks,

  35. When I go to the page in my published folder, the Lightbox effect works great…but when I publish to my FTP Server, the images open in a separate window. What am I doing wrong?

  36. Tim:
    I forgot the give you the website page.
    http://www.jaysmuck.com/jaysmuck/Green_Room.html

    Help!!!
    -Harry

    1. Harry,

      It works fine for me! Nice pics, I’ll have a Corona.

      Tim

  37. I figured out how to avoid the images opening in another window on your website. After you finish changing/saving the HTML code in your site folder, log onto your FTP (I use the app Transmit). Delete your site folder on the root server, than drag your site folder from your desktop into the root server. Now FancyZoom works like a charm!!! Give it a try.

  38. Amended Comment: LightBox, LyteBox or FancyZoom all work when dragging the site folder into your root folder on your FTP site. Do not do the standard “publish” on your iWeb. Drag and drop instead of “publish” did it for me.

  39. I am having trouble with each thubnail opening the next thumbnail’s image.

    if i had 3 thumbs, 1 wouldn’t do anything, 2 would open the image linked to 1, and 3 would open the image lijnked to 2. The 1 image seems to show if i just click on the background, not doesn’t work when pressing on thumb 1.

    anybody else have this problem? do you know what i’m doing wrong?

    besides the shifted images, the lightbox window does open fine…

    thanks!

  40. oops, i meant to say the 3rd thumb’s image shows if i click anywhere on the back ground.

  41. Hi there! for the life of me I cant figure this one out… Im very new to Web stuff and Im learning as I go (currently using mobileme). so please forgive my ignorance:)
    I followed your instructions (I think I did it right) and when I try to check that it is all in working order “Double-click your ‘gallery’ page and it will open in your default browser where you can test it out.” it doesnt work. (it opens the image in a new window) what am I doing wrong?

  42. HI,

    I’m having a similar problem to others in this thread.

    I have followed the tutorial to the letter and published to a Local Folder. I then tested the html file for my page direct from my mac and it worked beautifully in firefox.

    I then published the folder via Cyberduck to my ftp host and launched the site in firefox. It was here that i noticed that lytebox was not working, but my images were loading in a new page.

    The page is http://www.footprintfloorplans.com/Footprint_Floorplans_-_Floor_Plan_Drawing_Services/Footprint_Floorplans____floor_plan_drawing_services_-_samples.html

    Can you help, I cant find an answer to this anywhere.

    Cheers

  43. I can get it working up until i try to upload it, the images upon into a new window just like the guy above wrote, only mine works when i try it out on the desktop but when i drag the file to my site directory and load it online, it does not work. If you can assist, I would be most grateful

    thanks

  44. Hi, great explanation. I was wondering if you could give some insight into the differences on how to use lightbox2. I have tried a similar approach to what you describe here, and with the necessary changes according to the general use guidelines found inthe lightbox2 website, but it does not work.
    Any ideas?

    Thanks,

  45. How can you add the function to the ESCAPE KEY to close de lightbox?

  46. No works for me, I did it twice and not lightbox in my preview.
    I´m making a new web offline to change mine

  47. Sorry!! It works!!!, But If I change something in my web and publish again, it changes me the html code again

  48. Hi there!!

    Thank you sooo much for this tutorial, it has helped me SOOOO much!! It will do wonders for my site.

    I have a questions, semi related to this. On my home page, I am doing a flickr slide show right now but want to do a javascrip slide show with some text attached to the images. Any idea how I can make this happe.

    Any input would be greatly appreciated!

    Thanks a lot!

    Alex

  49. Would it be possible to open a web page in lightbox?

  50. Thanks so much! Works as advertised.

Leave a reply

Your email address will not be published. Required fields are marked *

More in Software