Meet Lightbox and 15 of its family members

In my last arti­cle I shared a nav­i­ga­tion menu using jQuery hov­er­In­tent. After this first arti­cle about Javascript, I decided to do a fol­low up arti­cle about the same topic. In this arti­cle I’ll intro­duce you to Light­box and 15 of its other fam­ily mem­bers. Light­box, and the newer Light­box 2, is a JavaScript appli­ca­tion used to dis­play large images using modal dialogs. It’s a great way to use child win­dows for dis­play­ing dif­fer­ent infor­ma­tion on your web­site, espe­cially for dis­play­ing your images in detail. Some of my favorites are also included. Enough talk­ing, lets get it rolling.

1 Lightview

Lightview was built to change the way you over­lay con­tent on a website.

• Clean: Designed to com­pli­ment your content.
• Fast: Smart image preloading.
• Easy: Cus­tomiz­able with­out hav­ing to know CSS.
• Rounded: Adjustable rounded cor­ners, no PNG images required.
• Smart: Con­tent resizes to always fit on your screen.
• Slideshow: One but­ton slideshow.
• Works on all mod­ern browsers.

2 Pirobox

• The script weighs only 15KB,  (9KB Minified)
• There is a choice between three dif­fer­ent styles (shadow, white or black)
• Slideshow option
• Mul­ti­ple image set option
• Key­board nav­i­ga­tion: Right arrow [next],  Left arrow [prev], ESC [close]
• Pre­view and Next but­tons out­side or inside the imageBox
• Auto­matic repo­si­tion­ing of the image in the browser window
• Browser com­pat­i­bil­ity = Fire­Fox 2+, Opera9.5+, Chrome, Safari (Mac/Windows), IE 6+
• + much more…

3 Image­box

4 Face­box

Face­box is a jQuery-based, Facebook-style light­box which can dis­play images, divs, or entire remote pages.

5 Fancy Zoom

Fancy zoom box loosely based on Cabel Sasser’s Fan­cy­Zoom. Built in pro­to­type and jquery. Works unob­tru­sively with con­tent already on the page, includ­ing images, head­ings, text and flash (pretty much any html).

6 Slightly Thicker­Box

7 pret­ty­Photo

Pret­ty­Photo is a jQuery based light­box clone. Not only does it sup­port images, it also add sup­port for videos, flash, YouTube, iFrames. It’s a full blown media light­box. The setup is easy and quick, plus the script is com­pat­i­ble in every major browser.

It comes with use­ful APIs so pret­ty­Photo can be launched from nearly any­where includ­ing Flash.

8 Thick­box

Thick­Box is a web­page UI dia­log wid­get writ­ten in JavaScript on top of the jQuery library. Its func­tion is to show a sin­gle image, mul­ti­ple images, inline con­tent, iframed con­tent, or con­tent served through AJAX in a hybrid modal.

9 Fan­cy­box

Fan­cy­Box is a tool for dis­play­ing images, html con­tent and multi-media in a Mac-style “light­box” that floats over­top of web page.

Fea­tures

• Can dis­play images, HTML ele­ments, SWF movies, Iframes and also Ajax requests
• Adds a nice drop shadow under the zoomed item
• Groups related items and adds nav­i­ga­tion. If the mouse wheel plu­gin is included in the page then Fan­cy­Box will respond to mouse wheel events as well
• Cus­tomiz­able through set­tings and CSS
• Sup­port fancy tran­si­tions by using eas­ing plugin

10 Shad­ow­box

Fea­ture

• Stan­dards: Shad­ow­box uses HTML markup that val­i­dates. It doesn’t depend on phony HTML attrib­utes in your anchor tags to make it work. The web has enough prob­lems with stan­dards com­pli­ance as it is, and Shad­ow­box does its best to not per­pet­u­ate them.
• Free from Frame­works: Although Shad­ow­box has the unique abil­ity to adapt to what­ever JavaScript frame­work you choose, it’s just as easy to run it as a stand­alone appli­ca­tion, giv­ing the devel­oper a great deal of flexibility.
• Cus­tomiz­able: Shad­ow­box sup­ports a host of options that make it highly con­fig­urable. If you don’t like the way some­thing works, chances are very good that you can change it with­out dig­ging through the code.
• Neat and Com­pact: The Shad­ow­box code is neat, mod­u­lar, and com­pact. You can even cre­ate a cus­tom build of the code that includes just the fea­tures you need so it’s as light weight as possible.

11 Col­or­Box

A light-weight, cus­tomiz­able light­box plu­gin for jQuery 1.3 and 1.4.

Fea­tures

• Sup­ports pho­tos, photo groups, slideshow, ajax, inline, and iframed content.
• Light­weight: less than 9KB of JavaScript.
• Appear­ance is con­trolled through CSS so users can restyle the box.
• Behav­ior set­tings can be over-written with­out alter­ing the Col­or­Box javascript file.
• Can be extended with call­backs & event-hooks with­out alter­ing the source files.
• Com­pletely unob­tru­sive, options are set in the JS and require no changes to exist­ing HTML.
• Pre­loads back­ground images and can pre­load upcom­ing images in a photo group.
• Writ­ten in jQuery plu­gin for­mat and can be chained with other jQuery commands.
• Gen­er­ates W3C valid XHTML and adds no JS global vari­ables & passes JSLint.
• Released under the MIT License.
• Tested In: Fire­fox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Inter­net Explorer 6, 7, 8.

12 Light­box gone wild

13 nyro­Modal

Fea­tures

• Ajax Call
• Ajax Call with tar­get­ing content
• Ajax call can change the modal size
• Sin­gle Image
• Images Gallery with arrow navigating
• Gallery with any kind of content
• Form
• Form in iframe
• Form with tar­get­ing content
• Form with file upload
• Form with file upload with tar­get­ing content
• Dom Ele­ment
• Man­ual Call
• Iframe
• Error han­dling
• Modal will never goes out­side the view port
• Esc key to close the window
• Cus­tomiz­able animation
• Cus­tomiz­able look
• Modal title
• Abil­ity to block only one element
• W3C valid HTML (Transitionnal)

14 Grey­box Redux

15 Slim­box

Fea­tures

From a func­tional point of view, Slim­box has the fol­low­ing added fea­tures com­pared to the orig­i­nal Lightbox:

• Slim­box is ready to launch as soon as the doc­u­ment is ready. This means that you don’t have to wait for all images of the page to be loaded before click­ing on a link that will launch the Light­box effect.
• Slim­box also cen­ters images ver­ti­cally on startup, not just hor­i­zon­tally. Ver­ti­cal scrolling is still possible.
• It works per­fectly on horizontal-scrolling websites.
• It tem­po­rary hides flash ani­ma­tions and other embed­ded videos while it is open to avoid dis­play bugs in some browsers. It also hides select boxes in Inter­net Explorer 6.
• Using a spe­cial option (“loop”), it allows you to nav­i­gate between the first and last images.
• Slim­box is more respon­sive; it allows you to close it imme­di­ately at any time using the key­board or mouse and to instantly nav­i­gate to any image before the cur­rent image has loaded or the ani­ma­tions are complete.
• The script is more robust; for exam­ple you can try to start and stop Slim­box or nav­i­gate between images very quickly to inter­rupt the ani­ma­tions and resume them and you won’t notice any bug like in the orig­i­nal Light­box where some­times the ani­ma­tion stops or the ele­ments are wrongly sized or positioned.
• Slim­box can be launched from the tra­di­tional image links inside the page like the orig­i­nal Light­box, but also directly from Javascript using its com­plete API.

From a design point of view, Slim­box is very dif­fer­ent from Lightbox:

• The code is opti­mized to an insane level and has been writ­ten from scratch with effi­ciency in mind for the MooTools frame­work instead of the huge Prototype/Scriptaculous. The script itself is as tiny as 4kb (mini­fied, uncompressed).
• Slim­box can be entirely cus­tomized thanks to many options. You can change the dura­tion of any effect, the counter text trans­la­tion or even the nav­ig­ta­tion keys.
• Slim­box has a much more pow­er­ful API, allow­ing you to apply the Light­box effect eas­ily on any click­able ele­ment or from any script. For exam­ple, it can be eas­ily inte­grated with links point­ing to Flickr or Picasa Web Albums pages or with any javascript image gallery.
• The Slim­box CSS are sim­pler and 100% valid (no more CSS hacks). Also, every visual aspect of Slim­box (includ­ing images) is spec­i­fied in the CSS instead of the Javascript so it is eas­ier to style. You may even change any bor­der size in the CSS and Slim­box will still work fine, which means that noth­ing is “hard-coded” in the source code.

My per­sonal favorites: Fancy Zoom, Fan­cy­Box, Shad­ow­Box, Col­or­Box and Slim­box. I hope you can use this round up to your ben­e­fit and feel free to share your favorites. If you know about more modal boxes and they’re not listed please add them with a com­ment below and I’ll include them later.

Shurandy Thode

My name is Shurandy Thode and I run this blog. I'm a student interested in graphic and web design sharing useful ideas and resources for inspiration. I also like photography and I'm addicted to social media. I am still learning a lot from day to day. You can follow me on Twitter and if you like what we do become a fan of us on Facebook and don't forget to subscribe to our RSS Feed. Shurandy Thode has written 48 post(s) for us.