• Functionality:
• + Fading Transition
• + Screen Navigation (Next, Previous, Close, or the Actual Image)
• + Key Board Navigation (Left & Right Arrow, Space, Esc.)
• + Loop Through Images (after last image goes back to first image vice versa)
• + Insert Onscreen text descriptions below the image via link title attribute text
• + Insert title of the image via thumbnail alt attribute.
• + Customizable

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 box2 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
8 kb – lighterbox.js
3.2kb – load.gif
0.9kb – lighterbox.css
0.3kb – overlay.png
0.2kb – prev.gif
0.2kb – next.gif
0.2kb – close.gif

It’s around 14kb – total!

The orignal “light box 2″ with scripts alone is 190kb…ouch. Remember 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.

Here is an example of How Lighter Box2 works.

below you will see the script along with several examples of how you can pick and choose to include or not include titles and descriptions.

Text works too…

1. The first thing you will do is download LighterBox2 and take the folder you extract from the zip file and drop it in the root directory where the files your users will be browsing are (where your index.html file is or index.php whatever you are using).

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


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



3. 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="lighterbox2/lighterbox2.js" ></script> </body>



4. Lastly you will insert the “rel” attribute with a value of “lighterbox” on the anchor tags that you want to use lighterbox2 on and fill the “title” attribute with your descriptions that are linking to your larger image files like this, and for your thumbnails use the alt attribute of the thumbnail to store the title of the image.


<a href="images/bigPicture.jpg" title="Short description here" rel="lighterbox" >

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

</a>



YAY…Test it out!

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

Blessings,
Richard Lee

Tags: javascript, light box, Lighter Box, Lighter Box 2, lighterbox, LighterBox2, progressive enhancement

This entry was posted on Sunday, December 14th, 2008 at 5:19 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.