Lightbox Demo

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

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

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

<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
});

<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];
      }
    }
  }
});

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

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

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

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

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

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

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

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

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

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

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

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

  $.lightbox( $content );
}

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

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

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

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

<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>";
}

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

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