Lightbox 2.0 web gallery

Lightbox web gallery became very popular not long ago. A lot of people were starting to using it on their websites, blogs,… But most of them don’t know there’s new version available for quite some time now.

How it works?

Simple. You link to the image you want to show with normal link. When you click on it, the website darkens and nice window slides open with chosen picture. You can navigate through this window to see all the pictures in the group. There are nice keyboard shortcuts which help you with navigation.

Why is this web gallery different? Well, it’s based around scriptaculous javascript. At first glance you’ll think it’s a flash gallery but you would be wrong. The visitors have to have javascript enabled to see gallery in action. I think this is better than flash, because almost all of my visitors have javascript enabled.

I use Lightbox 2.0 on many websites and I must say it looks very nice and there are absolutely no problems with it. Lightbox is unobtrusive and works on all modern browsers.

The implementation

The implementation is as simple as it gets. All you have to do is next:

Copy images into your image/lightbox folder (I use “gui” folder)
Copy css file into your css folder (I use “css” folder)
Copy javascript files into your javascript folder (I use “scripts” folder)
Insert javascript inclusion code to documents where you’re going to use lightbox gallery
<script type="text/javascript" src="scripts/lightbox/prototype.js"></script> <script type="text/javascript" src="scripts/lightbox/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="scripts/lightbox/lightbox.js"></script>
All you have to do now is to make a link to the picture. You can use text or image to link.
<a href="photos/image_01.jpg" rel="lightbox" title="image title">image #1</a>
or you can use small image
<a href="photos/image_01.jpg" rel="lightbox" title="image title"><img src="photos/image_01_small" /></a>
If you want to group pictures just change the rel tag in link.
<a href="photos/image_01.jpg" rel="lightbox[group]" title="image title 01>first picture</a> <a href="photos/image_02.jpg" rel="lightbox[group]" title="image title 02>second picture</a> <a href="photos/image_03.jpg" rel="lightbox[group]" title="image title 03>third picture</a>

Go check out the DEMO. I like this script because it can be very easy implemented into the website and because it looks great. Here is an image to see how it looks.

lightbox web gallery

If you like this post, you could subscribe to full feed RSS. You can also subscribe by Email.

Spread the word using these buttons.

sturdy

November 30, 1999 at 12:00 am

I like a lot Lightbox, but it uses a latter version of prototype, and it gets stuck if used with a newer version, what could be a headache if you pretend to use differents effects in your site.

I tried once, but it gets stucked, so I used Lytebox, that uses its own javascript. ^^

Lawrence Cheok

Hi Novak,

I’ve added you to my list of tags to join in Alex Shalman’s “Caring Compassion Charity”.

The idea is for you to write about something you’re passionate about. You would link to me and I would link back to the originator. It’s a good way to build networking. You can find my article post here:
A Purpose Driven Life

Niklas Kunkel

I didn’t realize what you were talking about until I saw the screenshot and remembered how a lot of blogs I’ve gone to have had that.

Looks pretty easy to implement and provides a sleek way of looking at images.

Thanks.

Novak's blog is about web design, making money, blogging tips, interesting pictures