jQuery Lightbox Plugins: Top 5

March 21st, 2011 Leave a comment
Like the article?
jQuery Lightbox

Everybody loves the good ol’ Lightbox image plugin. It has great utilities that spruce up a boring photo gallery with some awesome effects, and they’re generally very easy to install and customize. The only catch is Lightbox is based on the Prototype Framework and Scriptaculous Effects, a duo that hasn’t been as popular as the jQuery library. Most sites today do use jQuery, and adding two additional Javascript frameworks to the mix is both risky (there is a potential for construct conflict) and expensive (requires additional bandwidth on the page), especially if their sole purpose is to serve the Lightbox plugin. Lucky for you, there are jQuery lightbox alternatives out there that are as good or even better than the classic. In this article we’ll take a look at some comparable lightbox-style plugins that use jQuery!

1. jQuery Lightbox

Link: http://leandrovieira.com/projects/jquery/lightbox/

As simple as it sounds, the jQuery lightbox plugin is a replica of Lightbox using jQuery. It’s simple and elegant, like the original, and requires no more introduction than that! It’s fully-functional and can be added to a website that already uses the jQuery library very quickly.

Setting it up is easy, just include these lines in your HTML file:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

To use it, just call the Javascript like so:

<script type="text/javascript">
$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

2. NyroModal

Link: http://nyromodal.nyrodev.com/

While the jQuery Lightbox plugin goes the way of simplicity, NyroModal goes quite the opposite. The framework enables you to embed just about anything in a variety of different styles (including even youTube videos!) Here are some features NyroModal offers:

  • Ajax Call with targeting content
  • Single Image
  • Images Gallery with arrow navigating
  • Gallery with any kind of content
  • Form
  • Form in iframe
  • Form with file upload with targeting content
  • Dom Element
  • Manual Cal
  • Iframe
  • Stacked Modals
  • Many embed element through Embed.ly API/Demos
  • Error handling
  • Modal will never goes outside the view port
  • Esc key to close the window
  • Customizable animation
  • Customizable look
  • Modal title
  • W3C valid HTML (Transitional)

The samples and demos are too many to list here, and its setup is a tad more complex than a few lines of JavaScript: detailed usage and demos, however, can be found at their website!

3. Thickbox

Link: http://ajaxdaddy.com/demo-jquery-thickbox.html

Thickbox is a spiritual successor to lightbox, offering more features and alternatives than Lightbox (hence the witty naming). It offers more features than Lightbox, and is more functional. Here are just a few features, as per Thickbox’s site:

  • 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).

As with NyroModal, Thickbox is super-functional and has some setup and implementation examples too large for this website. You can find installation instructions as well as demos and examples on their website!

4. PrettyPhoto

Link: http://www.no-margin-for-errors.com/projects/prettyPhoto/

While the last two plugins have been more complex and full, PrettyPhoto offers the best of both worlds: it’s a simple Lightbox clone with support for a few more things besides images: the plugin also offers support for videos, flash, YouTube, and iframes! To show its simplicity, here are the steps to install it:

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

To use it, put this before your <body> tag:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

…and then add rel=”prettyPhoto” to whatever link you want PrettyPhoto to use, and success! No muss, no fuss- just an elegant Lightbox plugin!

5. Greybox

Link: http://orangoo.com/labs/GreyBox/

An elegant and lightweight plugin (22KB) that can be used to display anything from images to websites to any other content.

  • 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

To install:

Define the variable below in header section (between <header>…</header>). GB_ROOT_DIR is the URL where Greybox files are located on your site:

<script type="text/javascript">
var GB_ROOT_DIR = "http://mydomain.com/greybox/";
</script>

GB_ROOT_DIR must be an absolute link. In addition, append the following scripts and one stylesheet:

<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

AJS_fx.js is an optional Javascript include for effects. You don’t have to included if you aren’t interested in additional effects.

Usage Example:

<a href="http://google.com/" title="Google" rel="gb_page[500, 500]">Launch Google.com</a>

And there it is! Here are the top 5 jQuery Lightbox plugins. All vary in functionality, size, and features, but all share one thing: a level of elegance and professionalism tailored to match the needs of any production website out there!

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment