Simple, Lightweight, Cross Browser Lightbox for your webpage

October 3rd, 2008 by Nikhil

Not that there are only a few LIGHTBOX’s that you can find when you google. The issue with most of the lightboxes that I found was that they all seemed to use one or the other heavy weight JAVASCRIPT frameworks like JQUERY, PROTOTYPE, MOOTOOLS and the likes. They are all cool and swanky looking. But If your requirement is “BUT I WANT A SIMPLE AND LIGHTWEIGHT LIGHTBOX SCRIPT FOR MY SITE”, then here it is;

Some nice features of this lightbox

  1. Very light
    a. 4kb of Scripts when packed (8 kb unpacked)
    b. 2 kb of CSS
    c. Few lines of HTML for the lightbox container
  2. Simple to understand and implement
  3. Can have multiple Lightboxes on the same page.
  4. The same lightbox container is used to show, different content (which is separately included as hidden divisions in the page), depending on the link/option that is clicked.
  5. Automatically centers itself, taking into consideration all factors such as, Window height and width (screen resolution), page scroll amount and the height of the contents of the lightbox
  6. Tested in IE 7 & FF

View Demo |
Download Lightbox Source Zip (Downloaded [download#3#hits] times)


Using the Lightbox[Files in the zip file]

jo.js , jo_pack.js[packed version] :- a simple set of JAVASCRIPT OBJECTS [JO], which contains element, window and document positioning scripts. You can open JO.JS if you wish to get your hands dirty with some Advanced Javascripting, creating abstract functions, extending element properties and such. If you not too much in Javascripting , Leave it alone.

lightbox.js, lightbox_pack.js[packed version]:- Contain light box manager scripts. If you are page designer , also responsible with implementing the lightbox on the page, you need to understand the LightBoxManager . LightBoxManager basically contains just two functions showLightBox and closeLightBox.

lightbox.css :- If you know CSS , you can play around with lightbox.css to customize the look-n-feel lightbox.css

index.html: Sample implementation of the lightbox with two different content

lb_underlay_bkg.png :- This is light/simi transparent image that is used the background for the lightbox underlay [Underlay is the layer below the lighbox, which prevents the user from clicking any other entity on the page, while the lightbox is open]. You can use any image or even a solid color for this purpose, depending upon the page design and the requirement.

icon_lb_close.gif : – The image for close lightbox handle on the top right of the light box. Can use any image as per design

View Demo |
Download Lightbox Source Zip (Downloaded [download#3#hits] times)

Please let us have your comments and feedback …

Tags: ,


get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter


Leave a Reply

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter