30 Efficient jQuery Lightbox Plugins

jQuery is a powerful tool and using it has become a sine qua non condition of web designing. It practically transforms a web page from dullness to an entertaining and catchy piece of work. For images we have the lightbox plugin in its many variations. It displays images using modal dialogs and it became very popular because it is very easy to implement. You have to bookmark this article cause you don’t want to forget using one of these plugins in your future designs.

Lightbox 2 (2.04)

Lightbox 2 allows you to present images in a slick window, while darkening the rest of the page. It makes your site look professional, and adds very little to page load times. It does not require any browser plugins to work, and works on just about every web browser out there! When a browser doesn’t support javascript, the code fails gracefully.

Check the Lightbox 2 plugin for WordPress adapted by Rupert Morris.

Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4
Why you should be using ColorBox:

• Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
• Lightweight: less than 9KB of JavaScript.
• Appearance is controlled through CSS so users can restyle the box.
• Behavior settings can be over-written without altering the ColorBox javascript file.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads background images and can preload upcoming images in a photo group.
• Written in jQuery plugin format and can be chained with other jQuery commands.
• Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
• Released under the MIT License.

FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

Features

• Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
• Customizable through settings and CSS
• Groups related items and adds navigation.
• If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
• Support fancy transitions by using easing plugin
• Adds a nice drop shadow under the zoomed item

prettyPhoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

Litebox

Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.

Lightview

Lightview was built to change the way you overlay content on a website.

• Clean: Designed to compliment your content.
• Fast: Smart image preloading.
• Easy: Customizable without having to know CSS.
• Rounded: Adjustable rounded corners, no PNG images required.
• Smart: Content resizes to always fit on your screen.
• Slideshow: One button slideshow.
• Works on all modern browsers.

ThickBox 3.1

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

• ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
• The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
• ThickBox will resize images that are bigger than the browser window.
• ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
• ThickBox will hide form elements in Windows IE 6.
• ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
• Due to the ThickBox creator’s view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
• ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

jQuery lightBox plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.
lightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar.

Lightbox Gone Wild

While researching the best way to recreate a modal window for our current project, we ran into Lokesh Dhakar’s lightbox.js and we knew we found a winner delivery container. Dhakar’s method, however, while fantastic, was a bit too specific for our purposes and so we created our own implementation that we think is a bit more flexible for extending a web site’s interface. In this tutorial, we’ll take a look at how to create a modal window using some nifty JavaScript and CSS.

Slightly ThickerBox 1.7

Slightly ThickerBox is a modification of Cody Lindley’s Thickbox script. I modified it for use on my Jason’s Toolbox Redesign. The modifications allow the script to generate “Previous Image” and “Next Image” links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a “rel” attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)

Slimbox 2

Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

Dialog

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the ‘x’ icon by default.

Prototype

Here is a list of sample codes to show different ways to create windows and dialogs. You can view source of each example, even edit it and test your modification immediatly in your browser. Just click again on the link to open a new window/dialog with the modified code. Each window uses a javascript function to get a new id and DO NOT call setDestroyOnClose().
You can open the debug window if you want to see some debug outputs.

MochaUI

MochaUI is a web applications user interface library built on the Mootools JavaScript framework.
Uses:

• Web Applications
• Web Desktops
• Web Sites
• Widgets
• Standalone Windows and Modal Dialogs

FaceBox

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

It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

Boxy

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.

ModalBox

ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing bigger versions of images.
ModalBox is built with pure JavaScript and is based on Sam Stephenson’s excellent Prototype JavaScript Framework, script.aculo.us and valid XHTML/CSS. ModalBox uses AJAX to load content.

Shadowbox

Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

SimpleModal

SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

Why use GreyBox:

• It does not conflict with pop-up blockers
• It’s only 22 KB!
• It’s super easy to setup
• It’s super easy to use
• You can easily alter the style as it is controlled through CSS

Highslide JS

Highslide JS is an open source image, media and gallery viewer written in JavaScript. These are some of its advantages:

• Quick and elegant looking.
• No plugins like Flash or Java required.
• Popup blockers are no problem. The content opens within the active browser window.
• Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
• Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
• Outstanding, unconditional and free user support for both commercial and non-commercial users.
• Compatibility and safe degrading. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a given HTML page.

SexyBox

This will create a basic “lightbox” or “thickbox” interface using HTML masking.

WordPress jQuery Lightbox Plugin

Just download the plugin, unzip the files to the wp-content\plugins folder and activate the plugin in WordPress options.
Then, every time you want to use the Lightbox effect, just place a link to the image, and add the rel=”lightbox” attribute to it, in order to activate the effect when the link is clicked. You can also use rel=”lightbox-album” replacing album by a any keyword to group some pictures on an album

Picasa Lightbox

Picasa LightBox is a WordPress plugin that lets you easily add Picasa images to your WordPress posts and pages.
You can add Picasa images to your posts and pages without using any custom tags. Just click the Picasa Photos tab, browse your albums and select the picture you want to insert. Picasa LightBox does not download Picasa images to your server. Instead it displays them directly from Picasa. Picasa LightBox currently supports only public Picasa albums. Picasa LightBox inserts pure HTML code into your posts or pages so you can easily customize it to fit your needs.

Flexible Lightbox

After developing the plugin Wp ThickBox Integration, I decided to extend this features to “Lightbox” a cool jquery plugin to overlay images on the current page. In this case you can decide in the admin “images setting panel” if you want to “Open your images using Lightbox”.

Slimbox WordPress Plugin

This plugin includes the new Slimbox 1.64 javascript written by Christophe Beils and got transformed into a WordPress Plugin by me. 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.
Because Slimbox was designed to be 100% compatible with Lightbox, you can just replace the Lightbox 2 WordPress Plugin whit Slimbox Plugin and your Lightbox effects will work just as well as before.

FancyZoom meet jQuery

This will add the Zoom Effect to any a tag classed with zoom, and will show content relating to the id referenced in the href of the a tag.

NyroModal jQuery plugin

Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It’s easy to use and easy to design.
The big problem I experienced with every plugin I tried either using Prototype/Scriptaculous or jQuery is the customization. They say you can do whatever you want simply but that’s not fully true. The default CSS works fine, but most of time it’s a mix between required elements and optional. That mean you have to be very careful when editing it.
The other problem is the animation. That’s the worst point. I never found one plugin allowing to redefine easily the animations.

I tried to solve these problems with my plugin. I documented everything possible. The default CSS contains only optional rules. Without it, the plugin will works perfectly —but will also looks very sad. Regarding the animations, you can simply redefine them from A to Z. Thanks to the useful jQuery function like animate, fadeTo or the future enchant, it’s pretty simple.
Moreover, I added the ability to define many callbacks at different time in the process to allow you to edit the settings, the data or do whatever you need.

Pirobox V.1.2.1

• The script weight has decreased by 40%, now weighs only 15KB, (9KB Minified)
• There is a choice between three different styles (shadow,white or black)
• Slideshow option
• Multiple image set option
• PngFix for Internet Explorer 6
• Keyboard navigation: Right arrow [next], Left arrow [prev], ESC
• Previoue and Next buttons outside or inside the imageBox. .
• Broken Link Check
• Automatic repositioning of the image in the browser window

I believe you’ll find interesting and useful these articles too:

• 28 Useful JQuery Sliders You Need To Download
• 25 JQuery Menus Ready For Download
• All There Is To Know About HTML5 and CSS3

Share this

admin