1. 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:
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 in iframe
- Form with file upload with targeting content
- Dom Element
- Manual Cal
- 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)
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.
- 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!
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:
To use it, put this before your <body> tag:
…and then add rel=”prettyPhoto” to whatever link you want PrettyPhoto to use, and success! No muss, no fuss- just an elegant Lightbox plugin!
- 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
Define the variable below in header section (between <header>…</header>). GB_ROOT_DIR is the URL where Greybox files are located on your site:
GB_ROOT_DIR must be an absolute link. In addition, append the following scripts and one stylesheet:
<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!