General, Tools

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.

The sample html code.

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.

Initialized the code during onload.

The sample html code.

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:

4. Pirobox

Another jQuery Lighbox clone plugin I found.

How to use:

Download and include dependencies.

Initialized the plugin function:

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.

Initialize the the prettyPhoto function.

Add rel=”prettyPhoto” to any picture you want to activate the prettyPhoto feature.

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.

Sample HTML Code.

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.

Then select the links where you want to use the lightBox plugin. See sample code below.

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.

Sample HTML code.

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.

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.

  • Saurabh Shah

    nice bunch of lightbox …

  • 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://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 :)