You can also download
LIGHTER BOX 2!
NEW Both onscreen and keyboard navigation for galleries. Descriptions (AS MUCH AS YOU WANT) that will be displayed to the viewer… check it out.

I started searching for a light weight light box script that did not rely on a script library or frame work in order to help it function. I was not able to find one at the time that did not rely on a library… So I made my own. I have an economy host that does not support gzip so any large scripts I use my users will have to download them which can cause multiple seconds of page display delay.

The idea was obviously derived from light box and it works essentially the same way in all modern browsers ie6, ie7, ie8, safari, chrome, and firefox.. When JavaScript is off it degrades gracefully in that the photo is still accessible the experience just isn’t enhanced.

The Light weight File Sizes
4.4kb – lighterbox.js
2.4kb – loader3.gif
0.5kb – lighterbox.css
0.1kb – closebutton2.gif
0.3kb – overlay.png
7.7kb – total!

The orignal “ligh box” with script and all its friends are 16kb. So what? You wont say so what when your users are downloading multiples scripts on your server and every kb here and there adds up and people start leaving your site/content because your site is the one with the loading bar always half full. lol one script isn’t that big a deal but several scripts add up. Then there’s g-zip that’s another story. (with gzip compression on lighter box is like 1.093kb)

Here is an example of How Lighter Box works.
Text works too…

1. The first thing you will do is download the files and take the files from the folder you extract and drop them in the root directory. (not the folder but the files in the folder)

2. then you will insert a link to the script right before the closing body tag like this. (It doesn’t have to be exactly before the body tag just make sure it is below the content where you are using the script or else it will not work.)


<script type="text/javascript" src="lighterbox.js" ></script>

</body>



3. Next you will insert a link to the Style Sheet right before the head tag like this


<link rel="stylesheet" type="text/css" href="lighterbox.css" />

</head>



4. Lastly you will insert the “rel” attribute with a value of “lighterbox” on the anchor tags that are linking to your larger image files.


<a href="images/us.jpg" rel="lighterbox" >

<img src="images/ust.jpg" border="0" alt="us" />

</a>



YAY…Test it out!

If you find and bugs that I haven’t caught let me know please let me know.

If for some reason you can’t get it working, download these files and there is a test page in there and you can see how it is set up.

Blessings,
Richard Lee

Tags: javascript, light box, Lighter Box, lighterbox, lighterbox script, progressive enhancement, script

This entry was posted on Tuesday, December 9th, 2008 at 6:41 pm and is filed under Lighter Box, Web, scripts. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.