10+ promising jQuery Lightbox-Clones Plugin

Jan 27, 2009 insic 96 Comments

1. jQuery FancyZoom

fancy zoom

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});
});

$(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>

1	<a class="zoom" href="insicdesigns.com"><img src="path/to/image/sample.gif"></a>

DEMO DOWNLOAD

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><br />
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/><br />
<script src="/facebox/facebox.js" type="text/javascript"></script>

Initialized the code during onload.

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox()
})

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>

//for images

//for DIV

//for Ajaxes

DEMO DOWNLOAD

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 
}); 
});

$(document).ready(function() {

$("p#test1 a").fancybox();

$("p#test2 a").fancybox({ 'hideOnContentClick': true });

$("p#test3 a").fancybox({

'zoomSpeedIn': 0,

'zoomSpeedOut': 0,

'overlayShow': true

});

DEMO DOWNLOAD

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"><br />
    $(document).ready(function(){<br />
     $('.thumbs').piroBox({<br />
<!-- settings.options --><br />
       border: '10', <br />
       borderColor: '#fff',<br />
       mySpeed: 700, <br />
       bg_alpha: 0.5,<br />
       cap_op_start : 0.5,<br />
       cap_op_end: 0.8,<br />
       pathLoader: '#000 url(css/ajax-loader.gif) center center no-repeat;', <br />
       gallery : '.gallery li a', <br />
       gallery_li: '.gallery li', <br />
       single : '.single a',<br />
       next_class: '.next_in ', <br />
       previous_class: '.previous_in ' <br />
    }); <br />
});<br />
</script>

$(document).ready(function(){<br />

$('.thumbs').piroBox({<br />

<br />

border: '10', <br />

borderColor: '#fff',<br />

mySpeed: 700, <br />

bg_alpha: 0.5,<br />

cap_op_start : 0.5,<br />

cap_op_end: 0.8,<br />

pathLoader: '#000 url(css/ajax-loader.gif) center center no-repeat;', <br />

gallery : '.gallery li a', <br />

gallery_li: '.gallery li', <br />

single : '.single a',<br />

next_class: '.next_in ', <br />

previous_class: '.previous_in ' <br />

}); <br />

});<br />

</script>

DEMO DOWNLOAD

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

DEMO DOWNLOAD

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"><br />
$(document).ready(function(){<br />
$("a[rel^='prettyPhoto']").prettyPhoto();<br />
});<br />
</script>

$(document).ready(function(){<br />

$("a[rel^='prettyPhoto']").prettyPhoto();<br />

});<br />

</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>

</a>

Visit the site for more details and example.

DEMO DOWNLOAD

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)

DEMO DOWNLOAD

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: '<img src="images/imagebox/close.jpg" />'
			}
		);
	}
);

$(document).ready(

function()

{

$.ImageBox.init(

{

loaderSRC: 'images/imagebox/loading.gif',

closeHTML: '<img src="images/imagebox/close.jpg" />'

}

);

}

);

Sample HTML Code.

<a href="images/imagebox/large-image.jpg" title="Sample" rel="imagebox-bw"><img src="images/imagebox/thumnails.jpg" /></a>

1	<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.

DEMO DOWNLOAD

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" />

//the JS

//the CSS

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>

$(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.

DEMO DOWNLOAD

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"><br />
var GB_ANIMATION = true;<br />
$(document).ready(function(){<br />
$("a.greybox").click(function(){<br />
var t = this.title || this.innerHTML || this.href;<br />
GB_show(t,this.href,470,600);<br />
return false;<br />
});<br />
});<br />
</script>

var GB_ANIMATION = true;<br />

$(document).ready(function(){<br />

$("a.greybox").click(function(){<br />

var t = this.title || this.innerHTML || this.href;<br />

GB_show(t,this.href,470,600);<br />

return false;<br />

});<br />

</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>

<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>

DEMO DOWNLOAD

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.

Tags: jQuery lightbox

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

Zemanta

Saurabh Shah

nice bunch of lightbox …
- Admiral Crusenstern
  
  Nice plugin to zoom hd images without flash (works on iPad…) – http://www.ajax-zoom.com
http://www.acewebdesign.com.au Ace Web Design

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.
http://blog.insicdesigns.com insic2.0

@Ace Web Design yes you are right nyromodal is awesome.
http://blog.dileepsharma.com/ Dileep K Sharma

Nice collection ready to be used as a reference to identify pros and cons of each one while designing.
http://nyrodev.info Nyro

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/
http://wasimbhalli.blogspot.com/ Wasim

That’s Cool. JQuery rocks. Thanks insic
Pingback: 10+ promising jQuery Lightbox-Clones Plugin | Apni Library
Ryan

Nice article. Maybe you need to add shadowbox in the list.
Ryan

by the way here is the link. http://www.mjijackson.com/shadowbox/
http://titel.ro Constantin TOVISI

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
http://www.SohTanaka.com Soh

Cool list, I like this one too: http://www.nickstakenburg.com/projects/lightview/
Pingback: graphiceyedea » Blog Archive » the right/light lightbox
http://blog.insicdesigns.com insic2.0

@Soh yes lightview is cool but its based on prototype if im not mistaken.
http://www.dotworks.pl macias

nice collection… must use one of them.. thx
Lalit Choudhary

Nice collection of Light Box. Thanks for this Articles
http://www.pirolab.it/pirobox/ diego valobra

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
http://laranzjoe.blogspot.com lawrence77

good list
b00m

Payts! Another lightbox clone…
Add nko sa akong mga collections.^^’
menduzas

Excellent comparison!

Thanks
a lot
http://ferdychristant.com/ Ferdy

Don´t forget jQuery Hotbox…

http://ferdychristant.com/blog/archive/DOMM-7PDM4T

Sorry for the self promotion!
http://www.izymybiunaujienos.com Victoria

wow man, i really liked it
i am going to apply some of jQuery in my websites
regards

Victoria
http://zaidimuforumas.com/ ZAIDIMAI

it is amazings tricks
thank you so much
Mike

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
vanessa

Thank very much. These lightbox are great stuff…
carry on!
http://blogfreakz.com mupet

very useful, nice collections
http://www.cdpradeep.com pradeep

Great..

thanks.
http://www.dotworks.pl macias

nice list and very useful
http://hdragomir.com Horia Dragomir

Aw, you forgot about color box (http://colorpowered.com/colorbox/)
Great list, though. Thank you for the roundup!
http://www.kamaroc.com Kamal El fatihi

thankyou so so much for your help
Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
Pingback: Technology Related Links for April 30, 2009 - Jason N. Gaylord's Blog
http://www.acejunjiedesigns.net.tf Acejunjie Designs

Nice collections, thanks!
I like the fancy zoom the picture load fast.
http://gwlmicrofund.org Chung

Very good!
http://hammudi.com Muhammad Rashid Babsail

Great, thanks for sharing. My favorite is prettyPhoto, i’ll use it on my next project…
http://www.digitalrevolutions.biz Mike

Great collection!
ben

nice job, i’ve got my winner !!!
http://www.lightboxcodegenerator.info ben

Check out this free lightbox code generator! http://www.lightboxcodegenerator.info
http://www.cgartworld.com Khoe

Good list, unfortunately, most of them have almost identical functionality and none has built-in carousel (like the one in Apple and Palm Pre).
Pingback: JQuery goodness « CogBlog
Deiji

My favorite is clearbox.
http://www.clearbox.hu/
http://farinspace.com Dimas

Found exactly what I needed for my blog, I’m using Fancybox … it has some nice options.
Pingback: links for 2009-07-31 | Appunti di storie di web
Pingback: links for 2009-07-31 | Appunti di storie di web
http://www.rosamez.com/ rosamez

Nice list, thank you! I myself choose fancybox: the animations are smooth, autoresize works, and it was easy to customize.
Pingback: 10+ promising jQuery Lightbox-Clones Plugin | INSIC 2.0 Web Development & Design Blog | Squico
Levan

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?
http://ls3-solutions.com lewie

great collection!

A great one stop shop for plugins!!!
http://jasonstockman.com JasonStockman

Thanks for the list – I went through them all and found ColorBox to be the best for me (mentioned in the comments).
http://www.egetway.com seo

thanks for you this . really it is very help full for jquery resource.
thanks for post here
lalji halai

Thanks for collection very useful.
http://www.seoname.com
http://www.indialike.com indialike.com

This is really very good… Thanks
http://nuwiz.com Abhishek Jha

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!
http://nyrodev.com Nyro

@Abhishek Jha: you could set the setting modal:true to disable the closing on the background click.
- http://abhishekjha.net Abhishek Jha
  
  @Nyro: im not interested in disabling background click etc.. read my problem statement clearly once more.. it says the modal box vanishes even if you click the window-top text or border which is a part of the window box and im not talking about the close box or the background.. understood.
  
  this problem is fixed in modalbox made by http://okonet.ru/projects/modalbox/ .. can you fix the problem with your nyromodal box atleast now… since im already using okonet’s modalbox in one of my asp.net projects so far.
http://techcrank.com Shubham

Nice collections..!!.. really very helpful..!!
Pingback: Fancy Zoom « The Cillout Showroom
http://www.ooty.me Ooty

Good its same like facebook
http://www.tamil-movie.net tamil

good collection keep on going
http://www.jotboxmedia.co.uk Tom

Verrry interesting! Thanks!
Pingback: Guida per imparare ad usare jQuery Lightbox | unodeitanti.com
cyberacarl

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.
http://www.tamil-movie.net tamil

Good Collection, nice work
Hayden

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
Pingback: 8 Amazing JavaScript Image Zoom Scripts
http://www.alibeigi.com/ طراحی سایت

Really this is very helpful to us.
Thanks for sharing..
http://gamezat.dr3.net جيمزات

thank you for your share usful jquery plugins thanks
http://www.interior.my interior design

Truly a great post
http://www.mpsantoshkumar.info santosh kumar

nice very helpful
http://www.deiller.pro DigitalCoder

http://iaian7.com/webcode/mediaboxAdvanced (sorry need mootools)
http://www.deiller.pro DigitalCoder

this one is great ! http://yoxigen.com/yoxview/
http://www.100webhosting.com Jasmine

Great list of Lightbox alternatives. My favorite is Greybox Redux, as it’s lightweight and easy to integrate.
http://www.rab24apartments.com/en/ Martina

nice collections, thanks
http:www.cawal.com Antonio

Thank you, interesting article!
http://www.mediatronics.co.in kapil

very nice jQuery Lightbox plugin it is very useful for website developers

thanks for this nice plugin
http://www.pet-point.net kućni ljubimci

Great post, nice collection!
Gee

Nyromodal is the best so far
http://www.shprint.ir چاپ

nice
Collection
http://www.kontaktne-lece.hr/lece/miopija_ili_kratkovidnost.html Kratkovidnost

I use thickbox and is great script
http://www.itdesigner.ir طراحی وب سایت

nice collections thank you
http://croatia-istria.net croatia istria

this is very helpful to me, thanks for sharing!
http://fitoaroma.hr aromaterapija

This is very nice collection, thanks.
http://www.indiantemplesinfo.com Indian Temples

nice very helpful, thank for sharing.
http://ez-bizteam.com/teambuilder Faith Sloan

Thank you very much for this list. I am looking for simplicity. Need to integrate a php script with javascript to create a modal window that popups conditionally depending upon the value in the database. The modal window will have a form. To accept, the visitor makes a purchase in the modal box. To reject, the visitor clicks a ‘reject’ submit button.

Not sure why it is so difficult to find this type of onload code on the internet. I’m googled out.

My expertise is ColdFusion and PHP. This AJAX and/or jQuery stuff is new in my arsenal. I’ve always been a back-end person and now trying to do front-end stuff is killing me. HELP!!

Faith Sloan scam people need not reply LOL
http://www.taksafar.com تور

very useful tnx
Pingback: 10+ promising jQuery Lightbox-Clones Plugin | INSIC 2.0 Web Development & Design Blog » Web Design
http://www.dzinemart.com CSS Sites

Nice technique, Cool stuff for designers, Thanks for the post.
http://www.magepsycho.com/ MagePsycho

Thanks for the top ten list.
Among these, PiroBox, Fancybox & Lightbox clone has been integrated in a Magento extension:
http://www.magentocommerce.com/magento-connect/jquery-lightboxes-fancybox-pirobox-etc.html

so as to give different options to the store owner.

Thanks
http://www.saitechnos.com Sai Technologies

thanx for sharing this great information.. as a designer it is helpful to me a lot..
http://www.ideatrading.ir قیمت روز آهن آلات

Your website is great and thank for your Articles.
http://www.vira-co.com اتوماسیون صنعتی

Thank you very much you show us nice collection.
Pingback: 10+ promising jQuery Lightbox-Clones Plugin « JqueryHeaven
Pingback: 10+ promising jQuery Lightbox-Clones Plugin | JqueryHeaven
http://www.hostsleek.com Morris

Nice TUT
Chris Bollinger

where does the code go after Initialize the the prettyPhoto function?
http://www.facebook.com/tepu92 Teemu Laine

I don’t know why, but the code box starts flashing and jumping when i put cursor over it… Is that some copying security or what?! In my mind also NyroModal is the best

Related Post

Postcard Design Tutorials and Inspirations

List of Responsive Grid System Frameworks

High Quality Responsive Image Gallery Plugins and Tutorials

A Quick Look Inside the New MySpace

EpicEditor – An Embeddable JavaScript Markdown Editor

Friends

About