• Home
  • Services
  • Profile
  • Portfolio
  • Contact
  • Links
  • Blog
  • Archives
  • Sitemap
Subscribe: Posts | Comments | E-mail
  • Ajax XMLHttpRequestAsynchronous HTTP Request How To's
  • FreebiesBest Freebies Collection
  • MiscellaneousNews, Announcements & General Stuffs
  • Print & Web DesignPhotoshop, Vector, CSS, XHTML
  • ProgrammingProgramming PHP, ASP, .NET and more

Bali Web Design

Posted on March 27, 2008 - by webmaster

Web 2.0 Round up Modal Window Lightbox Effect Libraries

Web 2.0

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:

  • Javascript Lightbox Effects Featuring Lightview Multibox and Shadowbox
  • JQuery Lightbox Plugin Facebox and Balupton edition
  • Videobox: Lightbox for videos
  • Web 2.0 modal window featuring lightbox slimbox thickbox lightwindow and moodalbox
Share this article:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • Ping.fm
  • Pownce
  • Slashdot
  • StumbleUpon
  • Technorati
  • Tumblr
  • TwitThis
This entry was posted on Thursday, March 27th, 2008 at 17:13 and is filed under Web 2.0. 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.

6 Comments

We'd love to hear yours!



  1. Visit My Website

    May 23, 2008

    Permalink

    iNetBuzz » Roundup of Web 2.0 LightBox AJAX family said:

    [...] effect. This blog has compiled list of cool AJAXian effect from Lightbox modification. Just check this blog out guys. Lightbox effects used to implemented to overlay image, to have flash likes effect in non [...]



  2. Visit My Website

    September 27, 2008

    Permalink

    dora said:

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



  3. Visit My Website

    November 11, 2008

    Permalink

    vinhboy said:

    great list. thank you so much.



  4. Visit My Website

    December 10, 2008

    Permalink

    niken said:

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



  5. Visit My Website

    July 1, 2009

    Permalink

    karthe said:

    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



  6. Visit My Website

    April 3, 2010

    Permalink

    Velia Arbry said:

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



Leave a Comment

Here's your chance to speak.

  1. Name (required)

    Mail (required)

    Website

    Message

  • Most Popular Posts

    • { 108 } ResponsesPHP ajax login form using Jquery
    • { 79 } Responsesphp ajax tutorial create ajax based login form using jquery
    • { 71 } ResponsesASP Classic Programming Still Alive
    • { 53 } Responses63+ best practice to optimize PHP code performances
    • { 44 } ResponsesVideobox: Lightbox for videos
  • Latest Posts

    • PHP Newbie: Proper handling of Error & Exception in PHP
    • Why SEO lost importance
    • jQuery Mobile Announced : Touch-Optimized Web Framework for Smartphones & Tablets
    • Multiple Google Account Signin
    • Install, Configure & Running Memcache in Windows as Service
    • DynamicWP Image Cube Wordpress Plugin
    • New Wordpress 3.0 API menu_page_url
    • Wordpress 3.0 Custom Taxonomy
    • JQuery DataGrid Plugin Compass
    • Upgrading to upcoming CodeIgniter 2.0
  • Categories

    • advertorial
    • Ajax XMLHttpRequest
    • Featured
    • Freebies
    • Miscellaneous
    • Print & Web Design
    • Programming
    • Tutorials
    • Web 2.0
  • Featured News

    • PHP Newbie: Proper handling of Error & Exception in PHP by webmaster on August 18, 2010
    • Why SEO lost importance by webmaster on August 16, 2010
    • jQuery Mobile Announced : Touch-Optimized Web Framework for Smartphones & Tablets by webmaster on August 16, 2010
    • Install, Configure & Running Memcache in Windows as Service by webmaster on June 27, 2010
    • Website Optimization Best Practices, speed up your website load by ruby on May 21, 2009
  • Tag Cloud

    • Actionscript advertorial Ajax XMLHttpRequest API best practices CakePHP chat Classic ASP CMS CSS Development facebook firefox Flash flickr Freebies gmail HTML icons Javascript Jobs jQuery jQuery Plugins Library Lightbox memcache Mootools news Personal PHP PHP Frameworks plurk Print & Web Design prism Prototype regex regular expression Scriptaculous SEO Tutorial twitter Web 2.0 Wordpress Works YUI
  • Archives

    • August 2010
    • June 2010
    • May 2010
    • September 2009
    • June 2009
    • May 2009
    • April 2009
    • March 2009
    • February 2009
    • January 2009
    • December 2008
    • November 2008
    • October 2008
    • September 2008
    • August 2008
    • July 2008
    • June 2008
    • May 2008
    • April 2008
    • March 2008
    • February 2008
    • January 2008
    • December 2007
    • November 2007
    • October 2007
copyleft 2007 - 2010 Bali Website Design Studio