prettyPhoto a jQuery lightbox clone

by: Stéphane Caron

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It's a full blown media lightbox.

It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!

If you need support with prettyPhoto, please take a look at our forums

First include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS in the head of the page(s) where you want to use prettyPhoto.

	<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>

Then, initialize prettyPhoto. Put the following code before the closing tag of your body (</body>)

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

And...you're set!

To customize prettyPhoto, you can pass the following parameters

	<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 */
				hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
				modal: false, /* If set to true, only the close button will close the window */
				changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
				callback: function(){} /* Called when prettyPhoto is closed */
			});
		});
	</script>

Version 2.5 introduced an easy to use API. You can now open prettyPhoto from anywere.

The public API functions are the following

	$.prettyPhoto.open('images/fullscreen/image.jpg','Title','Description');
	$.prettyPhoto.changePage('next');
	$.prettyPhoto.changePage('previous');
	$.prettyPhoto.close();

You can also open galleries using the API, just pass arrays to the open function.

	images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
	titles = ['Title 1','Title 2','Title 3'];
	descriptions = ['Description 1','Description 2','Description 3']
	$.prettyPhoto.open(images,titles,descriptions);

You can now open prettyPhoto from Flash or launch is from anywhere, anytime!

Demos

Single image
Demo
Code

prettyPhoto can open single images.

To do so, simply:

Create a link (<a href="#">).
Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
Change the href of your link so it points to the full size image.

You can also add a title and a description to your picture:

To have display a title, add the title into the ALT attribute or your thumbnail image.
To have display a description, add the description into the TITLE attribute or your link.

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" /></a>

Image gallery
Demo
Code

To open an image gallery simply:

Create a link (<a href="#">).
Add the rel attribute "prettyPhoto" to it and add your gallery name in square brakets (rel="prettyPhoto[gallery]").
Change the href of your link so it points to the full size image.

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery]" title="You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a>

<a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a>

<a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>

<a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>

<a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a>

Flash content
Demo
Code

prettyPhoto is also a multimedia lightbox, to open flash content with it simply:

Create a link (<a href="#">).
Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
Change the href of your link so it points to the SWF file.
Then add the width and height as parameters in your HREF (?width=100&height=100).
In the case your flash needs specifics variables, add &flashvars and add the required parameters.

<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&amp;height=294" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="images/thumbnails/flash-logo.png" alt="Flash 10 demo" width="60" /></a>

<a href="http://vimeo.com/moogaloop.swf?width=580&height=326&flashvars=clip_id=4321799&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" rel="prettyPhoto[flash]" title="Vimeo Movie"><img src="images/thumbnails/flash-logo.png" width="60" alt="Vimeo movie" /></a>

YouTube content
Demo
Code

To open YouTube content with it simply:

Create a link (<a href="#">).
Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
Change the href of your link so it points to the YouTube video page, the same link you would share with friends.

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.png" alt="YouTube" width="60" /></a>

QuickTime movies
Demo
Code

You can open Quicktime videos with it.

To do so, simply:

Create a link (<a href="#">).
Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
Change the href of your link so it points to the .mov file.
Then add the width and height as parameters in your HREF (?width=100&height=100).

<a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&height=204" rel="prettyPhoto[movies]" title="Terminator!"><img src="images/thumbnails/quicktime-logo.gif" width="60" alt="Terminator Salvation" /></a>

<a href="http://movies.apple.com/movies/sony_pictures/angelsanddemons/angelsanddemons-video_h.480.mov?width=480&height=260" rel="prettyPhoto[movies]" title="Angels &amp; Demons"><img src="images/thumbnails/quicktime-logo.gif" width="60" alt="Angels &amp; Demons" /></a>

<a href="http://movies.apple.com/movies/magnolia_pictures/foodinc/foodinc_h.480.mov?width=480&height=260" rel="prettyPhoto[movies]" title="Food, Inc."><img src="images/thumbnails/quicktime-logo.gif" width="60" alt="Food, Inc." /></a>

External sites (iframe)
Demo
Code

If all the previous options are not enough, you can always open your content inside an iframe.

To do so, simply:

Create a link (<a href="#">).
Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
Change the href of your link so it points to the webpage you want to open.
Then add "?iframe=true" as a parameters in your HREF so prettyPhoto knows to open the content in an iframe.
Then add the width and height as parameters in your HREF (&width=100&height=100). Please note that the dimensions can be percent based.

<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

<a href="http://www.apple.com?iframe=true&width=500&height=250" rel="prettyPhoto[iframes]">Apple.com</a>
<a href="http://www.twitter.com?iframe=true&width=400&height=200" rel="prettyPhoto[iframes]">Twitter.com</a>

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.5.4

Uncompressed version

Compressed version

Version history

2.5.4: Fix a bug with the bottom nav, fix the them bug in IE6-7-8
2.5.3: New settings (hideflash,modal,changepicturecallback). Fixed a resizing issue and an issue where prettyPhoto would open if a user pressed keyboard keys.
2.5.2: Fixed a bug with the titles/descriptions in the gallery.
2.5.1: Fixed a bug when not titles/descriptions were provided to the API.
2.5: Rewrote the code, created APIs, cleaned the CSS a lot, fixed the keyboard navigation.
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.

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/)
Reason8 (http://www.reason8.com)
Tomas Sadzevicius (http://webarticles.info)
Matteo Di Capua (http://www.matteodicapua.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.