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.

Demo

Gallery (with titles)

Gallery 2 (without titles)

Picture alone

Browser support

This plugin has been tested and is known to work in the following browsers

Firefox 3.0 (Mac/PC/Linux)
Firefox 2.0 (Mac/PC)
Safari 3.1.1 (Mac)
Internet Explorer 6.0 (PC)
Internet Explorer 7.0 (PC)

Copyright

This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donations are always welcome.

Download

Uncompressed version (Script: 15.6kb / CSS: 5kb)

Compressed version (Script: 6.5kb / CSS: 4.2kb)

Version history

2.1.3: Fixed a bug in Opera, opacity can now be changed by modifying the javascript.
2.1.2: Fixed a bug in IE6 where the select boxes were showing on top of prettyPhoto.
2.1.1: Descriptions/Titles now support html code, fixed a bug with the resizing not taking the title height into consideration.
2.1: Added support for titles.
2.0: Fixed a glitch with the image resizing, redesigned the buttons, tweaked the css, images bigger than the viewport are now resized!
1.2: Fixed a bug with the single image display (previous button was always being displayed).
1.1: Fixed a bug with the description being cut and a bug with the close button.
1.0: Initial release of prettyPhoto.

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="prettyPhoto" to any picture you want to activate the prettyPhoto feature

				
<a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

* NOTE: The link need to point to the fullscreen image

To have a title displayed on your picture, you need to modify the "alt" attribute of the image to the desired title. To have a description for your pictures, you need to modify the "title" of the link to the desired description.

				
<a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

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

				
<a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery]" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

Donations

I spent a big amount of time to develop/support this script. You liked it? Feel free to donate!

Thanks to the following donators

Jamie Sutton (http://www.charlestoncreative.com/)
That's it for now!

Want to know where I got these pictures?

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