PrettyPhoto is super flexible, easy to set up, and responsive enabled jQuery lightbox plugin that creates lightbox effect for images, videos, flash, YouTube, iframes, and ajax. It is very easy to implement and user friendly so you can customize it a bit. The script is compatible with every major browser, even IE6.

Features:

• Supports lightbox for images, videos, flash, YouTube, iframes, and ajax.
• Very easy to implement.
• Supports on all mobile and tablet devices.
• Pretty Photo compatible in all major browsers and devices.

How to use it:

1. Include the Javascript jquery.prettyPhoto.js at the bottom of the web page.

<script src="path/to/jquery.prettyPhoto.js"></script>

2. Include the CSS prettyPhoto.css in the header of the page.

<link rel="stylesheet" href="path/to/prettyPhoto.css">

3. Add the basic HTML to the page.

<a href="path/to/image.jpg" rel="prettyPhoto" title="This is the description"><img src="path/to/image.jpg" alt="This is the title"></a>

4. Initialize the plugin and we're ready to go.

$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
    deeplinking: false
  });
});

Plugin's default options:

$("a[rel^='prettyPhoto']").prettyPhoto({
    animation_speed: 'fast', /* fast/slow/normal */
    slideshow: 5000, /* false OR interval time in ms */
    autoplay_slideshow: false, /* true/false */
    opacity: 0.80, /* Value between 0 and 1 */
    show_title: true, /* true/false */
    allow_resize: true, /* Resize the photos bigger than viewport. true/false */
    default_width: 500,
    default_height: 344,
    counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
    theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
    horizontal_padding: 20, /* The padding on each side of the picture */
    hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
    wmode: 'opaque', /* Set the flash wmode attribute */
    autoplay: true, /* Automatically start videos: True/False */
    modal: false, /* If set to true, only the close button will close the window */
    deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
    overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
    keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
    changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
    callback: function(){}, /* Called when prettyPhoto is closed */
    ie6_fallback: true,
});

<a href="path/to/image.jpg" rel="prettyPhoto" title="This is the description"><img src="path/to/image.jpg" alt="This is the title"></a>

$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
    deeplinking: false
  });
});

<a href="path/to/image-1.jpg" rel="prettyPhoto[pp_gal]" title="This is the description"><img src="path/to/image-1.jpg" alt="This is the title"></a>
<a href="path/to/image-2.jpg" rel="prettyPhoto[pp_gal]" title="This is the description"><img src="path/to/image-2.jpg" alt="This is the title"></a>
<a href="path/to/image-3.jpg" rel="prettyPhoto[pp_gal]" title="This is the description"><img src="path/to/image-3.jpg" alt="This is the title"></a>

$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
    deeplinking: false
  });
});

<a href="path/to/image-1.jpg" rel="prettyPhoto-2[pp_gal_2]" title="This is the description"><img src="path/to/image-1.jpg" alt="This is the title"></a>
<a href="path/to/image-2.jpg" rel="prettyPhoto-2[pp_gal_2]" title="This is the description"><img src="path/to/image-2.jpg" alt="This is the title"></a>
<a href="path/to/image-3.jpg" rel="prettyPhoto-2[pp_gal_2]" title="This is the description"><img src="path/to/image-3.jpg" alt="This is the title"></a>

$(document).ready(function(){
  $("a[rel^='prettyPhoto-2']").prettyPhoto({
    deeplinking: false,
    slideshow: 5000,
    autoplay_slideshow: true
  });
});

<a href="https://www.youtube.com/watch?v=SMKPKGW083c" rel="prettyPhoto" title=""><img src="path/to/image" alt="YouTube" /></a>

$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
    deeplinking: false
  });
});

<a href="http://vimeo.com/8245346" rel="prettyPhoto" title=""><img src="path/to/image" alt="Vimeo" /></a>

$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
    deeplinking: false
  });
});

<a href="#inline-1" rel="prettyPhoto" title=""><img src="path/to/image" alt="Inline Content" /></a>

<div id="inline-1" style="display:none;">
  Add inline content here.
</div>

$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto({
    deeplinking: false
  });
});