Stéphane Caron – No Margin For Errors

prettyPhoto

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. The setup is easy and quick, plus the script is compatible in every major browser.

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

Documentation

Please see this page for the complete project documentation.

Download

Uncompressed version | Compressed version


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+

Demos

prettyPhoto can open single images.

To do so, simply:

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
  3. 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:

  1. To have display a title, add the title into the ALT attribute or your thumbnail image.
  2. To have display a description, add the description into the TITLE attribute or your link.
  • This is the title
<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>


To open an image gallery simply:

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “prettyPhoto” to it and add your gallery name in square brakets (rel=”prettyPhoto“).
  3. Change the href of your link so it points to the full size image.
  • Red round shape
  • Nice building
  • Fire!
  • Rock climbing
  • Fly kite, fly!
			<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" 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[pp_gal]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a>

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

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

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

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

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
  3. Change the href of your link so it points to the SWF file.
  4. Then add the width and height as parameters in your HREF (?width=100&height=100).
  5. In the case your flash needs specifics variables, add &flashvars and add the required parameters.
  • Flash 10 demo
  • Vimeo movie
			<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.jpg" 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.jpg" width="60" alt="Vimeo movie" /></a>

To open YouTube content with it simply:

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


To open Vimeo content with it simply:

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

You can open Quicktime videos with it.

To do so, simply:

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

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

To do so, simply:

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

To open inline content, simply:

  1. Create a link (<a href=”#”>).
  2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
  3. Change the href of your link so it is the ID of the inline content you want to open with the ID CSS selector (#).
  • Food, Inc.
  • Flash 10 demo
  • Fly kite, fly!

Theme support

Choose from one of the five supplied themes.

Facebook alert box inspired theme.

Dark rounded semi-transparent theme.

Dark square semi-transparent theme.

Light square theme.

Light rounded theme.

Version history

  • 2.5.6: Fix a bug with the loader icon, fixed a bug where videos would still play when prettyPhoto was closed, fixed a bug when prettyPhoto is re-initialized after an AJAX reload.
  • 2.5.5: Added wmode as a setting, added vimeo support, added autoplay as a setting, inline content support, new theme (facebook style), markup is now a setting.
  • 2.5.4: Fix a bug with the bottom nav, fix the theme 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!

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.