Design Shack - Web design showcase, CSS tutorials and web standards
About
Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way. It is carefully curated and edited by Josh Johnson and David Appleyard.
Pirobox jQuery Lightbox
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):
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.
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?
Hey, there’s a bug if you click the background when lightbox its opening (during animation)
Bug not only when loading. Also when you click outside the photo on second demo. Gray layer removes but photo stays on top.
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
Hi there, thanks for the bug report.
I’ve just fixed the issues, so the demo page should now work correctly.
Thanks,
Diego
Nice work man. Keep up whit a good job. :)
thank you angeloff :)
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!
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!
Thats great news, I love alternatives and love what the traditional lightbox does, I am definately going to try this alternative, thanks
My name is Coach and I’m a Light Box junky…
Great idea, great comment!
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.
Test form comment.
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!
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.
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
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
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
very good, thanks
where is the DEMO please?
very good, thank you
I followed the instructions and the lightbox doesn’t work. Seems as if some instruction was omitted.
The information obtained from this very helpful for me, thank you.Special Price Classic UGG Boots
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.
This is really very good… Thanks