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.

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

To open an image gallery simply:

  1. Create a link ().
  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!

To open an image gallery simply:

  1. Create a link ().
  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.
  4. Pass the following settings when you initialize prettyPhoto: $(“a[rel^=’prettyPhoto’]”).prettyPhoto({theme: ‘facebook’,slideshow:5000, autoplay_slideshow:true});
Red round shape

Nice building

Fire!

Rock climbing

Fly kite, fly!

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

  1. Create a link ().
  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

To open YouTube content with it simply:

  1. Create a link ().
  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 ().
  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 ().
  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 ().
  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 ().
  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 ().
  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.