Pirobox jQuery Lightbox

by David Appleyard on 2nd December 2008 with 103 Comments

jQuery Keyboard Lightbox scripts have become a very popular way of displaying images online in recent months. There are a huge number of them available, using a variety of different frameworks and languages.

I’m pleased to announce that today, in partnership with Pirolab, there’s a new jQuery lightbox script available. It has been designed and created by Diego Valobra. If you’d like to read more about the features and download the lightbox script, click through to read on.

The gallery is simple to set up, and offers some great features:

Built completely on the jQuery library
Automatically resizes images based on browser window size
Previous/Next links can be outside the lightbox
Stylish loading graphic
Easily customizable

Download

There are three versions available to download, all included within the same package. They include an unpacked version (19.7kb), minimized (13kb) and packed (9kb):

Download

Installation

Full instructions on how to install can be found here, explaining how to link to the various required files, customize the display options and integrate your own images into the gallery. Everything can be altered visually using the comprehensive set of CSS rules.

Comments & Discussion

103 Comments

http://www. yer

OK, there are loads of lightbox clones, why would anyone need yet another one? How is it better than the rest? How does it beat original lightbox?
http://www. Anonimo

Hey, there’s a bug if you click the background when lightbox its opening (during animation)
http://www.evertsemeijn.nl/ Evert

Bug not only when loading. Also when you click outside the photo on second demo. Gray layer removes but photo stays on top.
http://www.pirolab.it/pirobox/ diego

Hi to everyone and thanks for the comments,
“yer” for sure is not original, but at least it’s something done by me, you say that there are many lightbox, I say that you are right,at the beginning this should have been just a simple tutorial for designshack, and instead it came out a little plug in addition to other lightbox.
I’m not a programmer, but a webdesigner and I have a lot of limitations in programming, and in this jquery helped me a lot.
As you read this is a version 1.0, only a first test with many bugs to fix, as they rightly noted in other comments, I’ll try to fix my little script, taking your comments as advices to improve my work.

Regards

Diego Valobra
http://www.pirolab.it/pirobox/ diego

Hi there, thanks for the bug report.

I’ve just fixed the issues, so the demo page should now work correctly.

Thanks,

Diego
http://www.angeloff.net/blog angeloff

Nice work man. Keep up whit a good job. :)
http://www.pirolab.it/pirobox/ diego

thank you angeloff :)
http://www.lautusdesign.com Peter Schaefer

I do enjoy the styling of this lightbox a lot, but I prefer the jQuery derivative. For a demo of this feel free to check out our Portfolio:

http://www.lautusdesign.com

Let me know what you think!
http://www.lautusdesign.com Peter Schaefer

I do enjoy the styling of this lightbox a lot, but I prefer the jQuery derivative. For a demo of this feel free to check out our Portfolio:

http://www.lautusdesign.com

Let me know what you think!
http://www.soula.com KateC

Thats great news, I love alternatives and love what the traditional lightbox does, I am definately going to try this alternative, thanks
http://www.coachflash.com Coach

My name is Coach and I’m a Light Box junky…
http://www.designshack.co.uk David Appleyard

Great idea, great comment!
http://www.jamesmartin.com James Martin

Some test words. This is likely to be a slightly longer reply to test wrapping and other aspects of the form. Some test words. This is likely to be a slightly longer reply to test wrapping and other aspects of the form. Some test words. This is likely to be a slightly longer reply to test wrapping and other aspects of the form.

Some test words. This is likely to be a slightly longer reply to test wrapping and other aspects of the form.Some test words. This is likely to be a slightly longer reply to test wrapping and other aspects of the form.
http://davidson.com David Jameson

Test form comment.
http://www.hearsaynashville.com Kev

Thought you might like to know, I’ve tried using this with the new jQuery 1.3 that was released yesterday. The loading gif go away when the photo is finished loading with this new version.

Thanks for a great, flexible lightbox!
Dino

Does this work only on a images nested inside the list tags? I’m having problems making it work actually. My images are inside their own div tags.
http://www.exilwiener.de Günther Hiesz

hello,

thanks for the imagegallery its a great work, but i have problems because when i use and configure the gallery offline on my desktop its working perfect, but on the server the script is not working and when i click on an image a new window opens with the image but no lightbox is working.
what can be the problem.
i tried on 2 different servers.
thanks for helping.

regards

günther
http://www.pirolab.it/pirobox/ Diego Valobra

Hi all, the new version 1.1 of pirobox is available at this link : http://www.pirolab.it/pirobox/
for any question or problem just email me at diegovalobra@gmail.com

Diego Valobra
http://www.pirolab.it/pirobox/ diego valobra

Hi günther,about your issue, I guess there’s could be a path mistake, if you have an online demo page, I can take a look and tell you where is problem.

Regards, Diego Valobra
Pingback: Image Galleries & Slidehow Scripts Roundup | Greepit.com | Open Source Resources for Designers & Developers
Pingback: HamzaED
Pingback: 57+ Ücretsiz Resim Galerisi, Slayt Gösterisi ve Lightbox Çözümü « Bay Bedava - Netten Başlıklar
http://www.sivascity.com sivas

very good, thanks
Pingback: 57+ Ücretsiz Resim Galerisi, Slayt Gösterisi ve Lightbox Çözümü | Bedavam.Net |
Pingback: 57 Galerias Gratis | Lo Pongo Acá
Pingback: JQuery: Die 22 besten Modal - Fenster Plugins | BLOGRAMMIERER
http://none mgp

where is the DEMO please?
http://www.sivas.ws sivas

very good, thank you
Pingback: 57+ Free Image Gallery, Slideshow And Lightbox Solutions | eBookTM | Download ebook, Jetaudio skin, Games
Pingback: Brilliant jQuery Image Gallery/Slideshow Plugins | oOrch Blog
april

I followed the instructions and the lightbox doesn’t work. Seems as if some instruction was omitted.
Pingback: 21 Brilliant jQuery Image Gallery/Slideshow Plugins
Pingback: Collection of 50+ AJAX Photo/Image/Gallery Plugins - DoNotYet.com
Pingback: jQuery常用WEB控件第七弹 | CKSKY
Pingback: JSSAY » 1000个JQuery极品插件(连载中…)
http://www.ugggoods.info ugggoods

The information obtained from this very helpful for me, thank you.Special Price Classic UGG Boots
http://www.tokotsifi.gr anna

Hi!

i love it! it is very nice!
i try it to use it into a site,it works to firefox but not to internet explorer.
i have on the top of the site a flash banner and when the photo opens go under the flash banner in internet explorer, in firefox works.
Pingback: jQuery极品插件 | 花花世界
Pingback: 57+ Free Image Gallery, Slideshow And Lightbox Solutions
http://www.indialike.com indialike.com

This is really very good… Thanks
Pingback: 5 Jquery Base LightBox « Web 2.0 Programming Tips
Pingback: 57+ Free Image Gallery, Slideshow And Lightbox Solutions « Web Design
Pingback: 57+ Free Image Gallery, Slideshow And Lightbox Solutions | Inseven Designs
http://www.marketingvision.ca Edi

Nice work. One thing though, I am using the script on a website I am working on in Joomla. It works well in Internet explorer, but It gives me an error message when opening in Firefox! Any suggestions on how to fix this?
Thank you
Edi
Pingback: 57+ Ücretsiz Resim Galerisi, Slayt Gösterisi ve Lightbox Çözümü « SourceWZ Blog
Pingback: 37 Fenomenales jQuery Plugins y Demos para Desarrolladores | Proyecto Aurora
Pingback: 基于jQuery 常用WEB控件收集 | TechTrack- 科技追踪
Pingback: Siteleriniz için 57+ Ücretsiz Resim Galerisi, Slayt Gösterisi ve Lightbox | BizimBlog
Pingback: 21 Brilliant jQuery Image Gallery/Slideshow Plugins « HUE Designer
amjad

thank’s
Pingback: 40 Incredibly Useful Web Design Tools You Should Use Daily « HUE Designer
Govind

Very nice ….
thanks….
http://www.avsaadasi.gen.tr avsa adasi

Very great article
Pingback: 12种常见的lightbox灯箱效果脚本 | 群英汇博客
Pingback: 21种基于jQuery的Gallery/Slideshow（幻灯）插件 | 传说中的翰鸿凌风
Pingback: 21 SlideShow برای گالری عکس و div | احسان حسینی
http://123doing.com 123doing

It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
Pingback: Pirobox 开源项目 - Ajax代码大全 - Java开源项目 - Java免费软件 - Lightbox - Pirobox - 开源网
梁超飞

很好，非常感谢！
Pingback: Danh sách các plugin jQuery Image Gallery/Slideshow | Blog thiết kế Website
Pingback: 5 Brilliant jQuery Image Gallery/Slideshow Plugins | Web Design Tutorials, Templates, and Web Designer Resources-Idealthought
http://webdesign colin

first number freelancer in the world…
http://www.rab24apartments.com/ Martina

It’s work perfect, thanks.
Pingback: かなり便利なJQueryプラグイン画像スライドショー « WEB TECHNIQUE
http://no dreamty

Thinks for your sharing!
Cesar

Can you see youtube videos with this jquery slider?
http://nositze ugurad

Cool plugIn. Very smooth animations in all browsers.
gratulation
http://www.freewebs.com Than

Hey i cant see this effect in online, but its working fine in offline…, can u tel me the solution??
- http://sharkt.pl/pozycjonowanie pozycjonowanie wrocław
  
  For me, it also doesn’t work;/
mi

Probably you’ve already figured that out .. but you need to clear your browser’s cache (some JS stuff is stored in cache)
http://photoshop.cc photoshop

so nice i may use it on
http://photoshop.cc photoshop
Pingback: 三人行 » Jquery插件(经典)
Pingback: Top 30 jQuery Gallery and Plugin – Precious Gift for Designers | BestKreative
Pingback: Harika resim galerileri | web tasarım ve internet magazin
Pingback: 超强1000+个jquery极品插件！更新中。。。 | 完美时光
Pingback: Harika resim galerileri @ İnternet Magazin
Palanikumar

Really its amazing………
very useful to me…….
http://www.jess-mccann.com Jess Mc

I am having the exact issue as günther. Offline the script works like a charm – as soon as i uploaded it live – the images open in the browser. How can i fix this?

Thanks
http://www.naumanakhtar.com Nauman Akhtar

Its really great to see such an awesome lightbox, I am gonna use it some where :)
Pingback: Francesca Capochiani
Pingback: 21 Brilliant jQuery Image Gallery/Slideshow Plugins | WebScriptPlus.com
http://www.bunddesign.com/selfcatering/cottage.html melanie bund

The lightbox does not work in firefox, the caption appears above the box and the buttons disappear – is there any fix for this?
thanks in advance
Pingback: jquery图片展示插件（转） | 西街口
majid

it’s awsome
Pingback: 57+ Free Image Gallery, Slideshow And Lightbox Solutions | Kill your Time
http://skapski.com Skąpski

Thanks for the gallery!
Pingback: Wallpaper Ajax Jquery Gallery » Example Codes
http://www.1s3y5j2l4.com Zoraida Baibak

That is excellent, I by no means thought about Nostradamus within the
Pingback: 57+ Free Image Gallery, Slideshow And Lightbox Solutions | PHPVA.COM
Pingback: 50+ Free Image Gallery, Slideshow And Lightbox Solutions
http://www.malatyaforum.com Malatya Forum

JQuery is the best and your work is too.
Pingback: Free jQuerry Galleries | Young Minds, Blog
http://www.vajinismusklinik.com vajinismus

blogs super thanks…
http://www.hairtransplantcenterindia.com Hair Transplant India

Thanks for this Photo Gallery.
http://www.rap-rc.com/vb rap-rc.com

thanx
http://www.ukash-tr.com kaozci

thanks for photo galery but download link does not work
Pingback: 20 Slideshow jQuery Plugins | DandyWP
http://mustafadolmaz.com mustafa

thanks for information. great article
Error

The requested URL /public/countdownloads.php was not found on this server.
http://sharkt.pl/pozycjonowanie pozycjonowanie

For me, it also does not work;/
fafa

Here you will find free svripts with demonstration

www 55points.blogspot com
fafa

Here you will find free svripts with demonstration

http://www.55points.blogspot com
fafa

Here you will find free svripts with demonstration

http://www.55points.blogspot
.com

Design Shack — Web Design Gallery, Articles & Community