prettyPhoto a jQuery lightbox clone

by: Stéphane Caron

Here's my jQuery lightbox clone, I did it because those available are either not close enough to the real lightbox (lacking animations, not supporting galleries, etc ,etc) or were just not suiting my need.

If you have any comment or ways to improve it, just leave me a comment!

Bellow you can see a demo of a gallery and single image.

Version history

1.0: Initial release of prettyPhoto.

1.1: Fixed a bug with the description being cut and a bug with the close button.

1.2: Fixed a bug with the single image display (previous button was always being displayed).

Demo

Gallery

Picture alone

Download

Uncompressed version (Script: 12kb / CSS: 4.2kb)

Compressed version (Script: 8kb / CSS: 3.6kb)

How to use

Nothing is easier to use. First include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS in the head of the page(s) where you want to use prettyPhoto.
jQuery can be download here

				
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

* NOTE: At the top of the CSS file, you can edit the images path if you want to customize the look. Everything is commented to make your life easier :)

Add rel="prettyOverlay" to any picture you want to activate the prettyPhoto feature

				
<a href="images/fullscreen/1.jpg" rel="prettyOverlay" title="This is the description for the picture 1">IMAGE 1</a>

* NOTE: The link need to point to the fullscreen image, you can also add the title attribute to have a description on the image.

If you want the images to be a part of a gallery, just add the gallery name in braket, like so: rel="prettyOverlay[gallery]"

				
<a href="images/fullscreen/1.jpg" rel="prettyOverlay[gallery]" title="This is the description for the picture 1">IMAGE 1</a>

Want to know where I got these pictures?

Jingles the pirate from flickr was kind enough to let me use his pictures.