Bali Web Design Studio is a small enthusiast web design studio based in Bali, Jakarta, Indonesia.

Web 2.0 Round up Modal Window Lightbox Effect Libraries

Lightbox effects

Modal window effects or well known as lightbox effects has became a new web 2.0 buzz words, since lightbox released, many clones has launched, made by creative developers around world wide web.

Lightbox effects used to implemented to overlay image, to have flash likes effect in non flash web page using javascript, but nowdays the implementation has became various can be used to overlay images, video, flash movie, dialog or alert box, even wrapping external web page and form submission collaborated with ajax method.

Here i listed some of the excellent lightbox effect libraries that you can choose to have overlay effects in your web pages.

Lightbox 2 :

Lightbox effect

overlay images effect made by Lokesh Dhakar, uses Prototype Framework and Scriptaculous Effects Library, Lightbox has inspired the others lightboxes.

Slimbox :

lightbox slimbox

Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.

Thickbox :

lightbox effect jquery thickbox

ThickBox is a webpage UI dialog widget written in JavaScript on top of jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid overlay modal window.

Moodalbox :

lightbox effect moodalbox

Written by Răzvan Brateş used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework. It can be used to display some help document, an extra options page, a registration form, etc.

Lightwindow :

lightbox effect lightwindow

Written by Kevin Miller one of my favourites, Lightwindow is based on Prototype Framework and Scriptaculous Effects Library, and Lightwindow can be your one stop solutions for overlaying content in your web page, can be used to overlay images, video, flash movie, inline content, external webpage, ajax form etc., but though the layout styling using CSS it is still a lil bit difficult to do the modification. Overall lightwindow is one of the best :)

Videobox: Lightbox for videos :

lightbox effect videobox

Videobox is a 6kb script, which shows your videos in the page with an overlay. It was inspired from Lightbox.v2 and uses some of the Slimbox’s code. It’s written for the wonderful mootools library. And used swfobject to embed flash. link

Facebox :

lightbox effect facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. Uses transparancy round corner style.

Lightview :

lightbox effect lightview

Lightview written by Nick Stakenburg as the site says overlay images anything with style, Lightview can be used to overlay image, set of images, external web pages, quicktime video, flash movie, ajax form, Iframe, inline content, I personally love the style, adjustable rounded corner without PNGs image, useing Prototype 1.6 Framework and Scriptaculous Effects Library.

Multibox :

lightbox effect multibox

another lightbox effect by pathfusion, it was designed to give inline popup effect to a link which were targeted to images, flash, flv (flash video), multimedia (Quicktime, Window Media, Real, mp3s), and html with ability to add ajax functionality, was made using mootools v1.11 and to embed flash object using swfobject.js.

Shadowbox :

lightbox effect shadowbox.js

Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented overlay media viewer application. Supported images, flash, multimedia, html and ajax page. Shadowbox is cross-adapter, means it was built with support to different javascript framework to run with such as: Yahoo! User Interface Library, Ext (standalone), Prototype + Scriptaculous, jQuery, MooTools.

GlassBox :

Lightbox effect glassbox

GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. I personally love the homepage, excellent effects.

  • jQuery Lightbox Plugin (balupton edition) Visual clone of lightbox2 based on jquery javascript library. link
  • Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images HTML popups, and Ajax form on web pages. Uses excellent Zoom effects.
  • Control.Modal is the part of Livepipe control suite a collection of six high quality widgets and controls for Web 2.0 applications, Control.Modal can be used for Lightboxes, Modal Windows and Tooltips, built using the Prototype JavaScript framework.
  • YUI based Lightbox Yahoo! User Interface Library (YUI) based Lightbox effects written by thecodecentral.com
  • SqueezeBox moo.Playground – SqueezeBox is a lightbox effects library based on Moo Tools which can handle everything, images, image gallery, web page, ajax page, etc.
  • Mediabox Using MooTools javascript library, Mediabox let you open flash, video, and html content in a floating “lightbox” style window.
  • LITBox Few modifications of Thickbox made into a Prototype class and Scriptaculous.
  • lightboxXL (for prototype.js) Lightbox effects to embed flash movie uisng prototype javascript library.
  • Lytebox is a self-contained object version of lightbox2, eliminated the dependency of prototype.js, effects.js, and scriptaculous.js. Support images overlays and HTML content as well, the improvements of Lightbox2
  • Lightbox++ is an improvements of Lightbox2 with the ability to overlay flash movie
  • iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload can be used to overlay images, divs, and HTML page.
  • mooSlideBox is small and slim ajax based extension, an excellent slide lightbox effects based on the mootools framework version 1.11.
  • Smoothbox is the thickbox for mootools javascript framework.

Required Resources:

  • JQuery Query is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
  • MooTools MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
  • prototypejs Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.
  • scriptaculous script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly

Related Articles:

6 Responses.

  1. Velia Arbry April 3, 2010

    Thanks very much, I’ve found this very nice!

  2. karthe July 1, 2009

    hi,
    i got it correctly when i run it separately, when i used it in my HTML page with template of a website its not working. can u say me in which part i have made mistake.

    Regards
    Karthe

  3. niken December 10, 2008

    i’m realy like your post great job and post more javascript and ajax topic

  4. vinhboy November 11, 2008

    great list. thank you so much.

  5. dora September 27, 2008

    Great list. Thanks. Here is another round corner generator: http://www.roundz.net

Leave a Reply

bali web design studio Freelance Web Developer Works Bali Web Design Portfolio Get Web Design Quotation RSS Feeds