#### Basic

    <a href="large.jpg" class="lightbox" title="Image caption text.">
    	<img src="thumbnail.jpg" alt="">
    </a>

    $(".lightbox").lightbox();

#### Gallery

    <a href="large_1.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
    	<img src="thumbnail_1.jpg" alt="">
    </a>
    <a href="large_2.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
    	<img src="thumbnail_2.jpg" alt="">
    </a>
    <a href="large_3.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
    	<img src="thumbnail_3.jpg" alt="">
    </a>

    $(".lightbox").lightbox();

#### Thumbnails

Thumbnail Gallery Overlay Thumbnail Gallery

    <a href="large_1.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
    	<img src="thumbnail_1.jpg" alt="">
    </a>
    <a href="large_2.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
    	<img src="thumbnail_2.jpg" alt="">
    </a>
    <a href="large_3.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
    	<img src="thumbnail_3.jpg" alt="">
    </a>

    $(".lightbox").lightbox({
      thumbnails: true
    });

#### YouTube & Vimeo Videos

YouTube Video Vimeo Video Viddler Video (Custom Formatter)

    <a href="//www.youtube.com/embed/XXXXX?rel=0&autoplay=1&fs=1" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
    	<img src="youtube.jpg" alt="">
    </a>
    <a href="//player.vimeo.com/video/XXXXX?title=0&byline=0&portrait=0&autoplay=1&badge=0" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
    	<img src="vimeo.jpg" alt="">
    </a>
    <a href="//www.viddler.com/embed/XXXXX/?f=1&player=full&secret=XXXXX" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text.">
    	<img src="viddler.jpg" alt="">
    </a>

    $(".lightbox").lightbox({
      videoFormatter: {
        "viddler": {
          pattern: /(?:viddler\.com\/)((v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?\/]*)/,
          format: function formatViddler(parts) {
            return '//www.viddler.com/embed/' + parts[6];
          }
        }
      }
    });

#### Overlay

    <a href="large_1.jpg" class="lightbox" title="Image caption text.">
    	<img src="thumbnail_1.jpg" alt="">
    </a>

    $(".lightbox").lightbox({
      overlay: true
    });

#### Overlay without Viewer

    <a href="large_1.jpg" class="lightbox" title="Image caption text.">
    	<img src="thumbnail_1.jpg" alt="">
    </a>

    $(".lightbox").lightbox({
      overlay: true,
      viewer: false
    });

#### Fixed Positioning (desktop only)

    <a href="large.jpg" class="lightbox" title="Image caption text.">
    	<img src="thumbnail.jpg" alt="">
    </a>

    $(".lightbox").lightbox({
      fixed: true
    });

#### Top Positioning (desktop only)

    <a href="large.jpg" class="lightbox" title="Image caption text.">
    	<img src="thumbnail.jpg" alt="">
    </a>

    $(".lightbox").lightbox({
      top: 25
    });

#### In-Line Content

Show Hidden Content Show Hidden Content 2

## Some Content!

This was hidden on the page and loaded into the new Lightbox instance.

Testing a checkbox

## More Content!

This was hidden on the page and loaded into the new Lightbox instance.

    <a href="#hidden_content" class="lightbox"
    	Open Hidden Content
    </a>
    <div id="hidden_content" style="display: none;">
    	<div class="inline_content">
    		<h2>Inline Content!</h2>
    	</div>
    </div>

    $(".lightbox").lightbox();

#### jQuery Objects

    <a href="#" class="launch_lightbox">
    	Open jQuery Content
    </a>

##

    $(".launch_lightbox").click(launchLightbox);

    function launchLightbox() {
      var $content = $('More Content!');

      $.lightbox( $content );
    }

#### iFrame

View NASA Entry View NACA Entry

    <a href="http://example.com" class="lightbox">
    	Example.com
    </a>

    $(".lightbox").lightbox();

#### Sizing (desktop only)

View NASA Entry

    <a href="http://example.com" class="lightbox"  data-lightbox-height="500" data-lightbox-width="500">
    	Example.com
    </a>

    $(".lightbox").lightbox();

#### Caption Formating

    <a href="large.jpg" class="lightbox" title="Image caption text.">
    	<img src="thumbnail.jpg" alt="">
    </a>

    $(".lightbox").lightbox({
      formatter: formatLightboxCaption
    });

    function formatLightboxCaption() {
      return "<h3>" + $(this).attr("title") + "</h3>";
    }

#### No Theme

    <a href="large.jpg" class="lightbox" title="Image caption text.">
    	<img src="thumbnail.jpg" alt="">
    </a>

    $(".lightbox").lightbox({
      theme: ""
    });