prettyPhoto

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.

It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6.

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

If you need support with prettyPhoto, first take a look at our FAQs.
If you were not able to find an answer, feel free take a look at our forums.

Resources

DocumentationTutorialsFAQsSupport forums

Download

Production version »
v.3.1.5 Compressed
Development version »
v.3.1.5 Uncompressed

Copyright

prettyPhoto is totally free to use, it is released the GPLv2 (http://www.gnu.org/licenses/gpl-2.0.html) or Creative Commons 2.5 license (http://creativecommons.org/licenses/by/2.5/). Feel free to use the one that suits your needs. You can use it in all you projects even commercial ones as long as you leave the credits at the top intact. Please note that if you plan to make money using prettyPhoto, donations are more than welcome.

Browser support

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

  • Firefox 3.0+
  • Google Chrome 10.0+
  • Internet Explorer 6.0+
  • Safari 3.1.1+
  • Opera 9+

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

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

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 (#).

To open ajax 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 points to the ajax page you want to open.
  4. Then add “?ajax=true” as a parameters in your HREF so prettyPhoto knows to open the content with ajax.
  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.

Theme support

Choose from one of the five supplied themes.

Default theme with the help of Orman Clark and Christian Budsched (Kriesi).

Facebook
inspired theme.

Dark rounded semi-transparent theme.

Dark square semi-transparent theme.

Light square theme.

Light rounded theme.

Version history

  • 3.1.5: Fixed:Now works with jQuery 1.9
    Dropped: Support for IE6
  • 3.1.4: Fixed: Bug with Facebook like under IE9
    Fixed: Bug with the shebang when liking on Facebook
  • 3.1.3: Added: support for youtu.be links
    Fixed: Minor bug with the facebook like, the url wasn’t correct on the init
    Fixed: Bug with social tools when it was turned off
    Fixed: Social tools alignment
    Fixed: Font color in the default theme
    Fixed: Hashtag is now cleared when prettyPhoto is closed
  • 3.1.2: Fixed: hide_flash setting now works with the new iframe embed code for Vimeo and YouTube
    Fixed: It’s now possible to add ?rel=0 to YouTube url to disable related videos at the end of a YouTube video.
  • 3.1.1: Added: Deeplinking support. You can now share prettyPhoto links
    Added: Social sharing tools.
    Fixed: IE7 overlay_gallery overlay bug.
    Fixed: Bug when opening percent based media then opening normal sized media, the second opened image wouldn’t be resized.
  • 3.1: Added: Ajax support.
    Fixed: Long title would cause the box to jump up a bit.
    Fixed: Namespaced scroll event.
    Fixed: Browsing throught picture wouldn’t bring you back to the end when clicking previous while being on the first picture.
    Fixed: Resize bug.
    Fixed: Issue where the inline gallery would cause a preloading of the iframes.
    Optimized: Gallery injection script, now 30% faster.
    Changed: The YouTube embed code for the new iframe embed.
    Changed: Slideshow are now enabled by default.
  • 3.0.3: Fixed: Double click on the close button causing a bug.
    Fixed: prettyPhoto API not being able to handle isSet properly.
  • 3.0.2: Fixed: The overlay gallery is now only displayed on rollover to resolve issue where it always showed during slideshow
    Fixed: Made the filetype check case insensitive
    Fixed: Percent based sizes to be independant
    Fixed: Issue with trailing characters after the filename
    Fixed: An issue when opening big images in inline content
    Fixed: Make sure the content never scroll over the top
    Fixed: Initial prettyPhoto position
    Fixed: Slideshow autoplay when closing – reopening prettyPhoto.
    Fixed: Scroll issue in IE
    Fixed: Width issue in IE
    Fixed: prettyPhoto default size
    Fixed: image preloading and image injection code
    Fixed: Resize icon behavior
    Changed: prettyPhoto now loops through the gallery instead disabling the next arrow on the last item
    Changed: Namespaced events to play better with other plugins.
    Changed: Keyboard event to only preventDefault on actions used by prettyPhoto
  • 3.0: Added: Keyboard event bindings as a setting.
    Added: Inline galleries.
    Added: custom_markup settings. Open anything you want! See this post for a tutorial.
    Added: Multiple prettyPhoto with different settings on one page.
    Added: Slideshows!
    Added: Custom markup support
    Changed: Vimeo video now uses their new universal player. http://vimeo.com/blog:334
    Changed: Default theme, now facebook.
    Changed: Default speed, now fast, feel snappier.
    Fixed: Vimeo video ID parsing.
    Fixed: Double click causing a where prettyPhoto would open without the faded background.
    Fixed: Bug when an image would not resize after opening an iframe.
    Fixed: Image resizing issues when allow_resize is set to false. Images now center properly.
    Fixed: “Image cannot be loaded” message bug. Removed the toLowerCase, a bug I introduced…can’t really say why :(
    Fixed: API calls now fallback to the IE6 compatible theme
  • 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.

I spend a lot of time to develop/support this script. You like it? Feel free to donate!