10+ promising jQuery Lightbox-Clones Plugin
27. Jan, 2009 
62 Comments
1. jQuery FancyZoom
Orderlist develop a lighbox clone powered by jQuery. More details can be read here.
The code below initialized the plugin and 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.
$(document).ready(function() {
$('a.zoom').fancyZoom({scaleImg: true, closeOnClick: true});
});
The sample html code.
<a class="zoom" href="insicdesigns.com"><img src="path/to/image/sample.gif"></a>
2. FaceBox
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. Visit faceBox site for more details.
Load the dependency files. Make sure the jQuery is loaded first before the facebox plugin.
<script src="jquery.js" type="text/javascript"></script> <link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/> <script src="/facebox/facebox.js" type="text/javascript"></script>
Initialized the code during onload.
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
The sample html code.
//for images <a href="stairs.jpg" rel="facebox">text</a> //for DIV <a href="#info" rel="facebox">text</a> //for Ajaxes <a href="remote.html" rel="facebox">text</a>
3. FancyBox
Is one of my favorite among Lightbox clones. Aside from easy integration to your html code it has a nice effect and smooth animation.
The following are list of FancyBox features:
- Automatically scales large images to fit in window
- Adds a nice drop shadow under the zoomed item
- Groups related items and adds navigation through them (uses preloading)
- Can display images, inline and iframed content
- Customizable through settings and CSS
For more details about FB. Visit this site here.
Sample Code:
$(document).ready(function() {
$("p#test1 a").fancybox();
$("p#test2 a").fancybox({ 'hideOnContentClick': true });
$("p#test3 a").fancybox({
'zoomSpeedIn': 0,
'zoomSpeedOut': 0,
'overlayShow': true
});
});
4. Pirobox
Another jQuery Lighbox clone plugin I found.
How to use:
Download and include dependencies.
<link href="css_pirobox/pirobox.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery1.2.6.js"></script> <script type="text/javascript" src="js/pirobox_packed.js"></script>
Initialized the plugin function:
<script type="text/javascript">
$(document).ready(function(){
$('.thumbs').piroBox({
<!-- settings.options -->
border: '10',
borderColor: '#fff',
mySpeed: 700,
bg_alpha: 0.5,
cap_op_start : 0.5,
cap_op_end: 0.8,
pathLoader: '#000 url(css/ajax-loader.gif) center center no-repeat;',
gallery : '.gallery li a',
gallery_li: '.gallery li',
single : '.single a',
next_class: '.next_in ',
previous_class: '.previous_in '
});
});
</script>
5. ThickBox
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.
Features:
- 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).
6. prettyPhoto
prettyPhoto a jQuery lightbox clone develop by Stéphane Caron.
Quick and easy to use plugin. Just download and include file dependency.
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Initialize the the prettyPhoto function.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Add rel=”prettyPhoto” to any picture you want to activate the prettyPhoto feature.
<a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"> <img src="/images1.jpg" alt="Picture 1 title" /> </a>
Visit the site for more details and example.
7. NyroModal
Features:
- Ajax Call
- Ajax Call with targeting content
- Ajax call can change the modal size
- Single Image
- Images Gallery with arrow navigating
- Form
- Form with targeting content
- Form with file upload
- Form with file upload with targeting content
- Dom Element
- Manual Call
- Iframe
- Error handling
- Modal will never goes outside the view port
- Esc key to close the window
- Customizable animation
- Customizable look
- W3C valid HTML (Transitionnal)
8. Interface Imagebox
Interface Imagebox is an Interface plugin for jQuery.
How to use:
Initialize the Imagebox function.
$(document).ready(
function()
{
$.ImageBox.init(
{
loaderSRC: 'images/imagebox/loading.gif',
closeHTML: '
'
}
);
}
);
Sample HTML Code.
<a href="images/imagebox/large-image.jpg" title="Sample" rel="imagebox-bw"><img src="images/imagebox/thumnails.jpg" /></a>
More details for this plugin visit the site here.
9. 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.
How to use:
Download and Include all the JavaScript and CSS dependencies.
//the JS <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script> //the CSS <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
Then select the links where you want to use the lightBox plugin. See sample code below.
<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>
For more details and information about this plugin visit the site here.
10. Greybox Redux
A lightweight plugin. Only 1.2kb using the jQuery library. Completely unobtrusive – no need to embed Javascript into your site.
Initialized the plugin.
<script type="text/javascript">
var GB_ANIMATION = true;
$(document).ready(function(){
$("a.greybox").click(function(){
var t = this.title || this.innerHTML || this.href;
GB_show(t,this.href,470,600);
return false;
});
});
</script>
Sample HTML code.
<h3>See it in action:</h3> <ul> <li><a href="http://google.com/" title="Google" class="greybox">Launch Google</a></li> <li><a href="http://yahoo.com/" title="Yahoo" class="greybox">Visit Yahoo</a></li> <li><a href="http://msn.com/" class="greybox">Microsoft would like a visit.</a></li> <li><a href="http://jquery.com/" class="greybox">jQuery Rocks!</a></li> </ul>
Thats all I can find for now. If you know something you can add here. Please let me know, feel free to drop me a comment.
I’m a Web Developer and Designer from Cebu City, Philippines. I am good at Wordpress, CodeIgniter, PHP, mySQL, jQuery and a standard compliant XHTML and CSS.
nice bunch of lightbox …
I havent tried all of them. but i certainly do prefer nyromodal compared to any others. I’ve got it setup in Zend Framework now so it is nice and easy to implement.
@Ace Web Design yes you are right nyromodal is awesome.
Nice collection ready to be used as a reference to identify pros and cons of each one while designing.
Thanks for linking my plugin and for your great comment.
You’ll also find a great comparing tool here: http://planetozh.com/projects/lightbox-clones/
That’s Cool. JQuery rocks. Thanks insic
Nice article. Maybe you need to add shadowbox in the list.
by the way here is the link. http://www.mjijackson.com/shadowbox/
I’ve been looking for quite a wile now for a Lightbox clone, jQuery or not, that would have integrated a 5 Star Rating System in the bottom left of the image. Has anyone come across something like that.
I figue that if this would be possible to accomplish a lot of foto sharing sites and communities would integrate it, as an alternative to what they’re using now.
titel
Cool list, I like this one too: http://www.nickstakenburg.com/projects/lightview/
@Soh yes lightview is cool but its based on prototype if im not mistaken.
nice collection… must use one of them.. thx
Nice collection of Light Box. Thanks for this Articles
Ty for linking my pirobox,i’ve just release the 1.1 version, it works with the last jquery released 1.3.1..
Diego Valobra
good list
Payts! Another lightbox clone…
Add nko sa akong mga collections.^^’
Excellent comparison!
Thanks
a lot
Don´t forget jQuery Hotbox…
http://ferdychristant.com/blog/archive/DOMM-7PDM4T
Sorry for the self promotion!
wow man, i really liked it
i am going to apply some of jQuery in my websites
regards
Victoria
it is amazings tricks
thank you so much
Slimbox (http://www.digitalia.be/software/slimbox2) has a JQuery port, that has a footprint of < 3kb when minified/gzipped. The Free CSS/Images are even nicer than Lightbox IMO.
(This is not self promotion, I am in no way affiliated with slimbox … unless you count the fact that I use it often for projects
Thank very much. These lightbox are great stuff…
carry on!
very useful, nice collections
Great..
thanks.
nice list
and very useful
Aw, you forgot about color box (http://colorpowered.com/colorbox/)
Great list, though. Thank you for the roundup!
thankyou so so much for your help
Nice collections, thanks!
I like the fancy zoom the picture load fast.
Very good!
Great, thanks for sharing. My favorite is prettyPhoto, i’ll use it on my next project…
Great collection!
nice job, i’ve got my winner !!!
Check out this free lightbox code generator! http://www.lightboxcodegenerator.info
Good list, unfortunately, most of them have almost identical functionality and none has built-in carousel (like the one in Apple and Palm Pre).
My favorite is clearbox.
http://www.clearbox.hu/
Found exactly what I needed for my blog, I’m using Fancybox … it has some nice options.
Nice list, thank you! I myself choose fancybox: the animations are smooth, autoresize works, and it was easy to customize.
Great plugins!
But not all of them work with dynamically generated elements. Greybox Redux – the simplest one works ! Anyone tried other plugins for dynamic els?
great collection!
A great one stop shop for plugins!!!
Thanks for the list – I went through them all and found ColorBox to be the best for me (mentioned in the comments).
thanks for you this . really it is very help full for jquery resource.
thanks for post here
Thanks for collection very useful.
http://www.seoname.com
This is really very good… Thanks
Well, there is one serious problem with nyroModal. When you click on window-top text or border(not on the close box), then it closes automatically which is really stupid.. say i had a contact-us form inside it and my user clicked the window top by mistake then the whole modelbox window will vanish and the user’s changes will get lost.. i dont recommend nyroModal for such apps.. it may just be fun for image galleries where users get bored of seeing your gallery images and wanna quickly close the modal window box anyhow without even pressing the close button.. they just click the top window and the whole thing vanishes automatically
And let me add this.. i found this problem in firefox version:3.5.5.. and didnt have time to test it elsewhere.
Lastly i dont understand why the dumb lightboxes use slow loading ajax “loading bar animations..”.. cant they open one html file in the modalbox using window.refresh & onpageload refresh to another page like javascript & html functions? duh!
@Abhishek Jha: you could set the setting modal:true to disable the closing on the background click.
Nice collections..!!.. really very helpful..!!
Good its same like facebook
good collection keep on going
Verrry interesting! Thanks!
Here’s one that’s not been mentioned for all you Mac fans out there, it’s called Top Up and can be found here http://gettopup.com/ (apologies for the copy and paste if link dont work)
I like really like it, but it does not fit in with the design I’m working on. So for this occasion I am going with Shadowbox. I like the simplicity of the coding and the clean layout, no large borders etc. Just a shame it does not have a head up dispaly (HUD)or overlays like Clearbox, which was mentioned by Deiji in the comment.
Thanks for that one Deiji
A cobination of the both would be good.
I also like Nyro Modal which is also crisp and clean. It’s just the website that put me off that one, a lot to read and a lot of coding. It would be nice to have some thumnail gallery pics Nyro. Sometimes it more easy/quicker to copy and paste code from source. Especially when one does not uderstand the code or somthing does not work for some reason.
Good Collection, nice work
Thanks!
This is one which does not require jQuery, but I found it very nice:
http://www.plashenkov.com/2010/01/lightweight-image-viewer-for-your-site.html