Simple Cross Browser Carousel with Paging using Mootools


Try it out

Open Lightbox with Report
Open Lightbox with Feedback
Download Source Here

Let us have you feedback !!!! NOW!!!!
You Name
Your Email
Your Report
 
and thanks tons for your feedback!

Not that there are a only a few LIGHTBOX code that you can when you search in google. The issue with most of the lightboxes that I found in google was that they all seemed to use one or the other heavy weight JAVASCRIPT frameworks like JQUERY, PROTOTYPE, MOOTOOLS and the like. They are all cool and swanky looking. But If your requirement is “ 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 6,7 & FF

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