Follow @scaron

Subscribe to my RSS here. Tweet

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.6 Compressed Development version »

v.3.1.6 Uncompressed Support prettyPhoto »

Donate

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

Single image

Demo

Code



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. prettyPhoto can open single images.To do so, simply: 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 Create a link (<a href=”#”>). Add the rel attribute “prettyPhoto” to it and add your gallery name in square brakets (rel=”prettyPhoto“). Change the href of your link so it points to the full size image. To open an image gallery simply:







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

Slideshow image gallery

Demo

Code Create a link (<a href=”#”>). Add the rel attribute “prettyPhoto” to it and add your gallery name in square brakets (rel=”prettyPhoto“). Change the href of your link so it points to the full size image. Pass the following settings when you initialize prettyPhoto: $(“a[rel^=’prettyPhoto’]”).prettyPhoto({theme: ‘facebook’,slideshow:5000, autoplay_slideshow:true}); To open an image gallery simply:







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

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&height=294" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="60" /></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.jpg" alt="YouTube" width="60" /></a>

Vimeo content

Demo

Code To open Vimeo 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 Vimeo video page, the same link you would share with friends. <a href="http://vimeo.com/8245346" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" 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 title="Despicable Me" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&height=360"><img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Despicable Me" width="50" /></a> <a title="Tales from Earthsea" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlr1_r640s.mov?width=640&height=340"><img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Tales from Earthsea" width="50" /></a> <a title="Grease Sing-A-Long" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/paramount/greasesingalong/greasesingalong-tlr1_r640s.mov?width=640&height=272"><img src="/wp-content/themes/NMFE/images/thumbnails/quicktime-logo.png" alt="Grease Sing-A-Long" width="50" /></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>

Inline content

Demo

Code To open inline content, simply: Create a link (<a href=”#”>). Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”). Change the href of your link so it is the ID of the inline content you want to open with the ID CSS selector (#).

This is inline content opened in prettyPhoto. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="#inline-1" rel="prettyPhoto" ><img src="/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg" alt="" width="50" /></a> <div id="inline-1" class="hide"> <p>This is inline content opened in prettyPhoto.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> </div>

AJAX content

Demo

Code To open ajax content, 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 ajax page you want to open. Then add “?ajax=true” as a parameters in your HREF so prettyPhoto knows to open the content with ajax. 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 rel="prettyPhoto[ajax]" href="/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?ajax=true&width=325&height=185">Ajax content</a>

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.6: Fixed: XSS Fix

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.

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 : Keyboard event bindings as a setting.: Inline galleries.: custom_markup settings. Open anything you want! See this post for a tutorial.: Multiple prettyPhoto with different settings on one page.: Slideshows!: Custom markup support: Vimeo video now uses their new universal player. http://vimeo.com/blog:334 : Default theme, now facebook.: Default speed, now fast, feel snappier.: Vimeo video ID parsing.: Double click causing a where prettyPhoto would open without the faded background.: Bug when an image would not resize after opening an iframe.: Image resizing issues when allow_resize is set to false. Images now center properly.: “Image cannot be loaded” message bug. Removed the toLowerCase, a bug I introduced…can’t really say why 🙁: 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.

Donations

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