By 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.
Loading ...
This is great! Last night I was looking for this option and the only way I found, involved to much html work. This is much better!
I have an alternative suggestion to those who do not want to edit the html outside of iWeb and using Aperture or iPhoto. It involves using a plugin called Flash Album Exporter for the previous mention programs. This plugin exports your pictures and creates a lightbox site. Once you have the lightbox site, you do an iframe in iweb’s html snippet with the specific size you require, and that is it. It works best if you upload your lightbox to the server first, and have the correct address of the lightbox site to use in the iframe. More info about the plugin is here: http://home.comcast.net/~flashalbumexporter/
Will this allow iPhone users to see it?
Slappy,
I tried it on my iPod Touch and it works fine.
Tim
Ok, i can’t seem to get through this problem. My images continue to load on a separate page and they are large and look nothing like lytebox.
I’ve pasted appropriate files inside site folder.
And pasted appropriate text in html folder.
Here is my html folder.
Blank 2
Am being dense? Why doesn’t this work?
THANK YOU THANK YOU THANK YOU!! You saved my day! after trying to find solutions for a couple of hours i finally found your site. And without alot of knowledge i manage to have a lightbox on my webpage, i think this is phanomenal 😀
I can finally sleep a bit now, so good night (and did i say thank you 😉
can you use lytebox with google maps instead of an image?
Hi Tim,
I tried this tutorial, and it worked fine when I tested the page in my browser, but when I go to the site, it is still going to a separate page… What am I doing wrong – still?
Hi Shelly,
Have you got a URL for a page I can take a look at?
Tim
I managed to insert a Lytebox gallery in my webpage even though I just started trying making my webpage for the first time.
But I am wondering if it is possible to edit the page i iweb with out having to do all the Lytebox gallery HTML thing again? Or do I have to finish the design 100% before doing the Lytebox gallery?
Hoping some body can help.
Thanks
//Omar
ok, i’m trying to add something kind of similar (Frog JS Image Gallery) using an HTML widget in iWeb. can’t quite get it to work and think i’m missing something simple.
I’m calling the script files where they should be called in the head of the home.html page, but they don’t seem to be calling up the HTML i put in my widget.
Gallery works fine as a standalone page on my desktop…so in a sense I guess I’m trying to “embed” it onto my existing iWeb template. Not possible?
would you mind taking a look at my source at: http://jimbwayne.com/kdtest/Test/Kristine_Design/Home.html
and in my HTML widget it’s:
Thank you so much! Sorry for the long post but I’m kind of pressed for time on this one. Any input would be much appreciated.
Take care, all.
Jim
Jim,
You can’t add your links and gallery (as far as I have found anyway) using an HTML Snippet. When you use an HTML Snippet iWeb doesn’t insert the code into the page physically, it creates a completely new page and then creates a link to that new page within your current page. Therefore in your example the script calling part in your head section can’t find the rest of the code later in the page because it isn’t actually there it is on another page.
I hope that helps,
Tim
Thanks for that great tutorial
As Omar mentionned, is there a way (or a program) that will keep the html code so that when we re-publlish the entire site, we don’t have to start all over? I suspect that only “publishing modifications” on iWeb will keep them but I’m not certain.
Also, maybe keeping a copy of the “pagename”.html in its final version with lytebox lines and replacing the same file on the server after having re-published our site could do the trick.
Any ideas?
As Pat and Omar have mentioned, is there any way to avoid having to re-tag/edit every page whenever you make a change to the site?
Hey, thanks for this! I just finished your first guide only to realize that you couldn’t do image sets. The I google’d again and came back to your site!
The guide is awesome, got it working with no problems!! Thanks so much!
Like the others here, I’m concerned about iWeb editing the HTML to remove all of the code. I was planning on have about 20-25 image sets, each with 5-6 images on a page and would HATE to have to re-edit that every time I changed something.
Hopefully there’s a solution.
Thanks again!
I am having problems. I did everything like it says but it doesn’t look like lytebox. When I click on the image on my page it just opens a new page and the image is huge and there is white space below it. It doesn’t look anything like it should. How do I fix that!
I have been using iWeb to manage my website for over 2 years now. I want to add lytebox to my gallery page, and have followed your tutorial. Lots of amazingness going on here. I got it all squared away in the HTML editor and have viewed it perfectly on my computer. Now I need to figure out how to actually put it in place on my site structure. I normally publish it through mobile me, and want to publish to my custom domain. Is there a way to do this? Thanks for your help!
—Dan
Hi,
Love all the iweb sites was attempting to create lytebox website using the tutorial but after 4 hours trying still just get pictures opening in another box v big without the lytebox effect. I am using iweb 2.04 and textwrangler 3.0 through OS 10.5.8. below is just a test i was doing with 2 pics can you see any problem with the HTML. PS new to HTML ok with Iweb.
Clive,
can you provide a URL with an example of the page you are trying to get working? I can take a look at the code then.
Tim
Wow Tim,
http://www.resinmonkeys.co.uk/Site/pictures.html
So quick to replay, in the meantime I have got it working on my desk top but not when published. Is this a iweb delay thing I have had this before.
The pictures menu button is the tester hence images layout not real.
Thanks for your help
Clive
Clive,
Have you published the changed site to your server? None of the code explained in the tutorial has been added to the page…hence it doesn’t work.
Tim
Hi there, I am having the same problem, link opens in new window 🙁
http://www.lukethomas.co.nz/Site/Index.html
the “del ray” link
Any help would be greatly appreciated
Dear Tim,
I think you have hit the nail on the head I did everything remotely i.e. changed html on site published to desktop and then saved to this location. When I then published to .mac account it did not work the code was missing.
You live and learn, you have probably guessed I am new to this stuff. I should have done it through my .mac directly is this correct yes?
Thanks for all your help, later I will give it ago again.
Clive,
Personally I think it is always a good idea to edit the code directly on MobileMe if you have an account. Just make sure you have a back up first.
Tim
what do you use for your comment system here? and i assume you use iweb to build your site? I’d like to set my pages up for clients so that they can comment on page content. thanks.
also, do you know if this is compatible with IE8? I’ve had issues recently with Shadowbox code not allowing pages to render in IE8 at all and am looking for an alternative with similar effect. or a fix for the code to allow it to work with IE8
Accoring to the web-site a fix for IE has been incorporated so IE8 shouldn’t have a problem.
Tim
Wow I know this is an old post but this is an AWESOME tutorial!!!
heres a link to my websites page where the lightbox thing is located now I just have to update all my other picture pages
http://web.me.com/andre88/http___www.euphemology.com/magconference.html
Hi,
Firstly, thanks for a great tutorial – the best available on the internet by miles. I have everything working fine but with a slight issue I can’t seem to get working:
One thumbnail on my site links to a set of 3 images appearing in the lytebox format, however, the 3rd image appears first, so you have to click ‘previous’ to go back through them.
No matter how I order the images in the code it always displays the ‘last’ image first.
Any ideas? I can show you the code if it helps.
Thanks
Sam
Hi there,
thanks for all the great tips!
just having a little sticking problem with this..
Have been able to get it all working when it’s published to a local folder, but can’t for the life of me get it to work when I then publish it to mobile me. Have tried going to web.me.com and deleting the old page and adding the new one, but no luck!
any ideas??
thanks
jess
Great tutorial,, love your website, so far super helpful…
I do have a question… same as Omar. In my case I am doing my portfolio,,, iWeb seems to be way more easier than building it in Dreamweaver but… I have a section, illustrations… that I will have to update every so often… every time I update that page (like add another illustration) I would have to re do all the lytebox thing again? Any ideas… THANKS!!!!
SO I finally got the effect to work, I had to change the iweb code from area href to a href. The issue I am having is my gallery of 3 images is now 7, it repeats 2 images twice and the 3rd one 3 times. Is there something I changed that I shouldn’t have?
Hi! Great site!
I have the same problem as a few other guys here. I follow the tutorial and everything works neat. But if I change something and saves. I have to do it all over again. It´s very frustrating. Especially when you have a lot of images…
Any tip someone?
Tim,
Thank you very much! A great tutorial! Thanks!
Tim writes:
“…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…”
If you drag/drop the whole folder instead of the content your images will just open on a new page and the image will be huge and there will be a white space below it.
Cheers great tutorial works like a dream! Keep up the good work!
Thanks a lot Tim!
I’ve been doing a lot of stuff with the help of your tutorials.
Check my Lytebox thing at http://www.sefiem.ciem.com.ve/SEFIEM/Miembros_2.html
Greetings!
-Daro.
How do you change the look of the arrows and “close” X? This is the problem i’m having with iweb; the default album arrows and “back to index” graphics don’t match those of my site. Any advice much appreciated.
Jeff,
You will need to change the images within the images folder that you downloaded. They will have to remain the same size and keep the same name but you can have what ever you want there.
I hope that helps,
Tim
Dude you rock!!! Thank you so much.
30 minutes well spent. Thank you for putting this great tutorial together.
Kindly,
Adil
Lytebox is great and it works well in my PRINT section of my site. If you click on Maker’s Mark it will take you to the page that I currently have Lytebox implemented on.
My question is: can Lytebox be used for video files, Vimeo links, or Youtube links?
Sorry, the link to my site is: http://web.me.com/tfawbush/tomfawbush/Home.html
Thanks a million! You have to do it everytime you update your site though :/
http://www.gannonburgett.com
Hey Tim!
It seems as a lot has posted above, I’m having an issue with having the images clickable, but opening in a new window, as opposed to the Lytebox feature.
I made a test site:
http://web.me.com/ikearstin/Test/mystique2.html
I published to my Sites folder. After I did all the coding, I went back into iWeb, published with my MobileMe, and ruh roh, nothing changed. Still opens in a new window.
I did this over like 3x. 🙁
Even the third time, I drag and dropped to my iDisk’s Sites folder (as opposed to my User/Kearstin/Sites). Still no go!
Help help help!
I HATE iWeb’s photo galleries! LOL
P.s., Ok I am actually starting over from scratch. 🙁
Thanks for all the tutorials, this site is great!
Hi, where did you get that background wallpaper that you are using in this tutorial? 😀
And the one you are using beneath your graffiti images as well..
Hi Tim – thanks so much for your site!
I’m using lytebox in my site but can’t get the close button working, see this here: http://www.rukaruka.co.uk/London_%28Personalised%29.html
Any ideas?
Thanks a lot for your post… It was very useful for my Portafolio, I´ve made a full panorama gallery with Lytebox in iWeb.
Try this http://www.panographos.com/site/Portafolio.html
Don´t miss the little eyes links…
Thanks a lot for all you tutorials from spain.
I´m doing a web and i´ve a litle problem with the ligtbox , its working but next-prev buttons are not shown.
This is the test page http://www.mesonelduke.com/test2/Entorno.html
I hope someone can help me fixing it.
ok, this is NOT working (just opens a new window, not in Lytebox mode). can someone please provide some helpful knowledge as to why this keeps happening?
So far in this post, it’s just people asking the same question, but NO ONE is answering
George,
What is your URL? If I can see your code I may be able to help.
Tim
I don’t seem to see where you explained what an image set was and how to create one? I can setup everything perfectly, however it just links to the one image when the lytebox pops up. How do I include multiple images?
hello.
I made a test page with 3 thumbs/images 1, 2, 3. i did the steps on this tutorial, and it does make a lytebox window happen, but the images are off-set from the thumbs. thumb 1 doesn’t work, thumb 2 opens image 1, thumb 3 opens image 2. clicking anywhere in the background opens image 3.
another thing i’m noticing is that in the lytebox’s set, it says there are 7 pictures available – the images repeat image 1 i 1/7 and 2/7, image 2 is 3/7 and 4/7, and image 3 is 5/7, 6/7, 7/7. why is it doing this?
i am using iweb ’09 and coda
thanks!
you made no mention of the: onload=”onPageLoad();”>
if you need to add code there or not like you did in the first tutorial of lightbox and what it would be if so.
Thank you!! I’m going to apply Lytebox to my own personal website now that I’ve done it! Your step by step instructions are perfect. Thank you so much, it looks great, now going to tweak the enlarged images so they look better.
Hi! i just wanted to say that i love your website; it was an invaluable resource to me as i was building my site in iweb. i used this tutorial to add lytebox to my gallery pages, and it worked fantastically! thank you so much! here is a link to my gallery: http://asharperart.com/gallery.html
thanks again,
ashley
Hi! Thanks so much for the tutorial, but I had a few questions that badly need to be answered….
My lytebox works when saved to my folder, but on the actual internet clicking on my images just sends you to a new page with the picture on a white background. I’ve tried saving from wrangler to my FTP server, but it doesn’t work. Am I missing a step? How do I get my changes from just saved to the folder, to working on the internet as well?
Thanks so much!
Hi! Thank you SO much for this tutorial! I just have one question that badly needs to be answered…
Okay, so once I’ve edited my code in textwrangler, and I’ve got my lytebox working when saved to my folder, how to I publish it to the internet? I’ve tried saving it to my FTP server, but it doesn’t work; my images still load to a new page when I click on them. How do I get my website published to the internet with a working lytebox? Do I have to save it to a specific folder on my server, or am I needing to change something in iweb?
Thanks a ton!!!