jQuery Lightbox

on Nov 10th 2008 with 36 comments

Cost: Free, links back
Found Via: http://leandrovieira.com/projects/jquery/lightbox/

I couldn’t tell you how many lightboxes I’ve used over the last few years. This specific lightbox was designed as a plugin for the jQuery library. It works perfectly, and more importantly, requires no additional markup to your document. You only need to call it from your Javascript file. You’ll have zero problems!




Lightbox
Lightbox

Tags: jQuery
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.ben-griffiths.com Ben Griffiths

    It’s not bad :) I have always preferred MultiBox, by phat phusion: http://www.phatfusion.net/

    • Ricky D

      Except that is for mootools?

  • http://www.pinceladasdaweb.com.br/blog/ Pedro Rogério

    You should learn to develop a ligtbox from scratch, it would be very interesting.

  • http://linkae.com/dmoena dmoena

    …and I prefer shadowbox. it’s jQuery comtpatible and loads not only inline elements.

    you should definitely offer a lightbox from scratch tutorial. that would be awesome.

  • http://www.influenced.net/ Mark Hutton

    I evaluated quite a lot of lightbox clones for jQuery and I found prettyPhoto to be the best ( http://www.no-margin-for-errors.com/projects/prettyPhoto/ ).. it looks great, centres vertically properly and supports multiple galleries per page

  • http://unwrules.com/ Alex Fraiser

    Sounds simple enough, thanks for sharing.

  • Martin Ansty

    Phatfusion’s Multibox looks very interesting, and it supports lots of different elements (flash, videos, iframes etc). I only wish it was a jQuery plugin, rather than mootools

    • http://jquery.phpbasic.com/divbox LinhNMT

      You can try with Divbox – a lightbox for jquery that same with Multibox http://jquery.phpbasic.com/divbox
      hope you like it.

  • http://www.projectfive.nl Duncan Krebbers

    Looks nice! But it isn’t possible with this lightbox to overlay div’s or html on your page, or am I wrong with that?

    @ Ben Griffiths; MultiBox looks really great, is it possible to use that with jQuery instead of Mootools?

  • http://www.freshclickmedia.com Shane

    Firstly, thanks for posting. I don’t want to sound ungrateful, but I feel that the ubiquity of Lightboxes has rather spoilt their appeal.

  • http://www.corrgraphics.net JohnnyO

    @ Ben Griffiths .. MultiBox is good but its moo tools. If you wanted to stick with jQuery check out FancyBox .. http://fancy.klade.lv/

    -JO

  • http://www.smple.com John

    I’ve found shadowbox to be the way to go on this too. No borders or other design elements, just sexy pictures.

  • http://URL(Optional) Eduardo

    plugins are nice, but knowing how to build from scratch rocks!

  • http://www.twosocks.com.au TwoSocks – website design

    thanks for the post, I myself have never actually like light boxes at all, but maybe that is just me :P

  • http://www.ben-griffiths.com Ben Griffiths

    Fancybox does look good too :)

    For all those who mentioned that MultiBox uses mootools – thats not so much a big issue, as you can use both mootools and jQuery on a single document at the same time. Of course that will increase load times for slow visitors as there’s two libraries to load.

    Personally, I’d love to see it ported to jQuery though :D

  • 10ha

    isn’t there’s thickbox?
    http://jquery.com/demo/thickbox/

  • http://www.unrealmedia.co.uk Unreal Media

    Another great gallery there.

  • http://www.ree-she.com Rishi Luchun

    ooh been looking for something like this!

  • http://www.as7ap4you.com kareem

    this is wonderful tutorial i will put acopy of this lesson on
    my site here
    http://www.as7ap4you.com

  • http://URL(Optional) Fº

    can i load jquery light box from Flash?

    • morgan

      i’m wondering this too. anyone know how to do this?

      • http://www.davidpuerto.com/index.html David Puerto

        Yes, you can do this a number of ways, even pass strings from Flash to the DOM in AS2 and AS3. I modified the popular PieceMaker 2 (AS3) and did just that with a little custom code and some foresight.

  • http://reg.kost.ru/ kost

    Good alternative for Thickbox, thanks.

  • mika

    wish it was in jquery library too but …

  • http://www.crispeegrafix.com/ Chris

    QUESTION:
    I have a client request for a light/thick/fancy box type of effect – but he wants thumbnails of the images within the box. I’m trying to advise against it – but was wondering if anyone knows of such a thing already out there?

    thanks

  • John

    I’m new to this. Is there a way to keep the next and prev buttons visible at all times?

    • http://www.gunk-design.co.uk Andy

      some of them have a simple true false statement to switch the next prev nav on

  • http://www.indialike.com indialike.com

    This is really very good… Thanks

  • http://uniquefont.kutakharisma.com/linuxfont.html linux FONT

    hello thanks for sharing ^^!
    how about “colorbox”? have tried to use it? it much better and complete.
    you can see it live at our website 0_0

    cheers

  • http://www.diligentcreators.com Shaz3e

    it helps me to create my new furniture websites, Thanx Net Tutorials

  • http://emailletterhead.blogspot.com/ Email Letterhead

    thank you very much. it’s a nice content. I like so much.

  • http://greeninu.com inu

    source if the light box with database php please?

  • Mauricio

    Thank YOUUU!!!!!! …. and thank you all posts!

  • http://blueco.ir/ طراحی سایت و سئو

    when i user light box with CYCLE jquery i have problem
    CYCLE dose dosent work!

  • JC

    I installed this and it looks good except the next and prev buttons don’t seem to work consistently. I can’t seem to figure out what the problem is. My HTML markup is exactly the same between each image, yet it works sometimes and breaks other times. I’ll have to scrap this if I can’t get the bugs out.

    Thanks!