Thursday, 25 February 2010

jQuery Lightbox Scripts

jQuery Lightbox Plugin
image
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.
Supports: images.
Main site: http://leandrovieira.com/projects/jquery/lightbox/
Fancybox
image
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
It was built using the jQuery library. Licensed under both MIT and GPL licenses
Supports: images, HTML, iFrame content
Main site: http://fancybox.net/
Shadowbox
image
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.
Supports: images, Flash, Quicktime, Windows Media Player, HTML
Main site: http://www.shadowbox-js.com/index.html
ThickBox
image
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.
Supports: images, gallery images, inline content, iFramed content, AJAX content
Main site: http://jquery.com/demo/thickbox/
Fancy Zoom (jQuery)
image 
This works with any html (images, text, headings, flash). The only caveat is it doesn't currently work with AJAX. Whatever you want to zoom to must be html already on the page.
Supports: images, inline content, text
Main site: http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/
Facebox
image
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.
Supports: images, DIVs, iFrame content
Main site: http://famspam.com/facebox
nyroModal
image
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.
Supports: images, inline HTML, iFrame, AJAX, video
Main site: http://nyromodal.nyrodev.com/
Interface Imagebox Demo
image
Supports: images.
Main site: http://www.intelliance.fr/jquery/imagebox/
Pirobox
image Supports: images
Main site: http://www.pirolab.it/pirobox/
prettyPhoto
image
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.
It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!
Supports: images
Main site: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

No comments: