Lightbox Demo

View Documentation

Basic

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

Gallery

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

Mobile

<a href="large_1.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail_1.jpg" alt="">
</a>
$(".lightbox").lightbox({
  mobile: true
});

Mobile without Viewer

<a href="large_1.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail_1.jpg" alt="">
</a>
$(".lightbox").lightbox({
  mobile: 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 
<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
亀小４組 3Drotator 
<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: ""
});
© 2018 Formstone