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

Picture alone

Flash

Movies (.mov)

External sites (iframe)

Mixed gallery

Google.com

Themes Support!

Choose from one of the 4 supplied themes.

Browser support

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

Firefox 2.0+
Safari 3.1.1+
Opera 9+
Internet Explorer 6.0+

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

Version :2.4.3

Uncompressed version

Compressed version

Version history

2.4.3: Fixed IE6 theme fallback support, fixed iframe parameters issue.
2.4.2: Implemented YouTube support, percent based sizes are now supported, code optimization.
2.4.1: Mixed galleries are now supported. That means you can have a gallery that contains iframe, flash, images, movies.
2.4: Added iframe support.
2.3.3: Added a classid to fix flash in Internet Explorer
2.3.2: Fixed a bug in single movie/flash opening, made a sprite with the images (faster loading).
2.3.1: Added callback support
2.3: Optimized the code, tweaked the design, movie and flash support is back!
2.2.7: Optimized the code, much faster now.
2.2.6: Fixed resizing issue.
2.2.5: Namespaced a missing classname to prevent conflict with wordpress.
2.2.4: Bug fixes, namespaced the classnames to prevent conflict with wordpress.
2.2.3: Added themes, reskined the buttons, minor bug fixes
2.2.2: Added navigation link beside the counter of the gallery. Localized the separator for the counter (1 "of" 2)
2.2.1: Fixed a bug with the gallery in IE6/IE7. Fixed a bug with the keyboard handling in IE6/IE7
2.2: Rewrote part of the code, big performance improvement. Images resized can now be expanded. Flash videos can now be opened in prettyPhoto. Keyboard events are now handled.
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.

Setup

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" charset="utf-8" />
	<script src="js/jquery.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

Then initialize prettyPhoto.

	<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
	</script>

To customize the settings, you need to pass the values to prettyPhoto, like so:

	<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto({
				animationSpeed: 'normal', /* fast/slow/normal */
				padding: 40, /* padding for each side of the picture */
				opacity: 0.35, /* Value betwee 0 and 1 */
				showTitle: true, /* true/false */
				allowresize: true, /* true/false */
				counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
				theme: 'light_rounded', /* light_rounded / dark_rounded / light_square / dark_square */
				callback: function(){}
			});
		});
	</script>

If you plan on using one of the dark themes, please note that IE6 users will see the light square theme since IE6 doesn't support PNGs.
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>

To load a YouTube video, simply link to the YouTube video url. You can also add "&width" and "&height" to specify the sizes, if not provided, default dimensions will be applied.
```
	<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/flash-logo.png" alt="YouTube" width="60" /></a>
```

To display flash (.swf) or movies (.mov), link to the .swf or .mov file, then specify the width and height. In the case your flash needs specifics parameters, add &flashparams and add the required parameters.

	<a href="http://vimeo.com/moogaloop.swf?width=580&amp;height=326&amp;flashvars=clip_id=4321799&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" rel="prettyPhoto[flash]" title="Vimeo Movie"><img src="images/thumbnails/flash-logo.png" width="60" alt="Vimeo movie" /></a>
	
	<a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&amp;height=204" rel="prettyPhoto[movies]" title="Terminator!"><img src="images/thumbnails/quicktime-logo.gif" width="60" alt="Terminator Salvation" /></a>

To load sites in an iframe inside prettyPhoto, link to the desired website and add the following params. "?iframe=true", to tell prettyPhoto to open the page in an iframe and "&width=300" "&height=300", to specify the iframe dimensions.
```
<a href="http://www.google.com?iframe=true&amp;width=600&amp;height=300" rel="prettyPhoto[iframes]">Google.com</a>
```

Donations

I've spent a lot 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/)
Antti lehtinen (http://www.secondpicture.com/)
Troi deSignS (http://www.troi.co.il/design_h.php)
Greg MacNeil (http://www.blackdotdesign.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.