formstone
Version:
Library of modular front end components.
563 lines (523 loc) • 33.2 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Lightbox · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="lightbox-demo">Lightbox Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/lightbox">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/1200x900/1.jpg?v=1.20" class="lightbox_image js-lightbox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<img src="https://spacehold.it/300x300/1.jpg" alt="">
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="large.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail.jpg" alt="">
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox();</code></pre>
</div>
</div>
<style>
.inline_content {
width: 300px;
overflow: hidden;
padding: 0 20px;
}
.inline_content h2 {
margin-top: 20px;
}
.fs-lightbox h3 {
font-style: italic;
font-size: 16px;
margin: 0;
padding: 5px 0;
}
.fs-lightbox-mobile .inline_content,
.fs-lightbox-mobile .inline_content h3 {
color: #fff;
}
</style>
<script>
Formstone.Ready(function() {
$.lightbox("defaults", {
videoFormatter: {
"viddler": {
pattern: /(?:viddler\.com\/)((v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?\/]*)/,
format: function formatViddler(parts) {
return '//www.viddler.com/embed/' + parts[6];
}
}
}
});
$(".lightbox").not(".lightbox_format").lightbox({});
$(".js-lightbox_format").lightbox({
formatter: customFormat
});
$(".js-lightbox_object").click(launchObject);
});
function customFormat() {
return '<h3>' + this.attr("title") + "</h3>";
}
function launchObject() {
$.lightbox($('<div class="inline_content"><h2>More Content!</h2><p>This was created by jQuery and loaded into the new Lightbox instance.</p></div>'), {
mobile: true,
theme: $(".js-theme_select").val()
});
}
</script>
<h4>Gallery</h4>
<!-- START: FIRSTDEMO -->
<style>
.gallery {
margin: 20px 0;
overflow: hidden;
}
.lightbox_image {
display: block;
float: left;
margin: 0 2% 10px 0;
width: 31.3333%;
max-width: 150px;
}
.lightbox_image img {
display: block;
width: 100%;
}
.no-touch .lightbox_image:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/1200x900/1.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="image_gallery" title="Curabitur blandit tempus porttitor.">
<img src="https://spacehold.it/300x300/1.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/2.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="image_gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<img src="https://spacehold.it/300x300/2.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/3.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="image_gallery" title="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.">
<img src="https://spacehold.it/300x300/3.jpg" alt="">
</a>
<!-- <a href="//www.youtube.com/embed/zsJpUCWfyPE?rel=0&autoplay=1&fs=1" class="button lightbox" data-lightbox-gallery="image_gallery" title="Sed posuere consectetur est at lobortis.">
YouTube Video
</a> -->
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><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></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox();</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Thumbnails</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/1200x900/1.jpg" class="button js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Curabitur blandit tempus porttitor." data-lightbox-thumbnail="https://spacehold.it/300x300/1.jpg" data-lightbox-options='{"thumbnails":true}'>
Thumbnail Gallery
</a>
<a href="https://spacehold.it/1200x900/1.jpg" class="button js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Curabitur blandit tempus porttitor." data-lightbox-thumbnail="https://spacehold.it/300x300/1.jpg" data-lightbox-options='{"thumbnails":true,"mobile":true}'>
Mobile Thumbnail Gallery
</a>
</div>
<div style="display: none;">
<a href="https://spacehold.it/900x1200/2.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x200/2.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/3.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/200x300/3.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/4.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Sed posuere consectetur est at lobortis." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x300/4.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/5.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Nulla vitae elit libero, a pharetra augue." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x200/5.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/6.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Nullam quis risus eget urna mollis ornare vel eu leo." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/200x300/6.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/7.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Aenean lacinia bibendum nulla sed consectetur." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x300/7.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/8.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Sed posuere consectetur est at lobortis." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x200/8.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/9.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Praesent commodo cursus magna, vel scelerisque nisl consectetur et." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/200x300/9.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/10.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="thumbnail_gallery" title="Nullam quis risus eget urna mollis ornare vel eu leo." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x300/10.jpg" alt="">
</a>
</div>
<div style="display: none;">
<a href="https://spacehold.it/1200x900/2.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x200/2.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/3.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/200x300/3.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/4.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Sed posuere consectetur est at lobortis." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x300/4.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/5.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Nulla vitae elit libero, a pharetra augue." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x200/5.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/6.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Nullam quis risus eget urna mollis ornare vel eu leo." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/200x300/6.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/7.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Aenean lacinia bibendum nulla sed consectetur." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x300/7.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/8.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Sed posuere consectetur est at lobortis." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x200/8.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/9.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Praesent commodo cursus magna, vel scelerisque nisl consectetur et." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/200x300/9.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/10.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="mobile_thumbnail_gallery" title="Nullam quis risus eget urna mollis ornare vel eu leo." data-lightbox-options='{"thumbnails":true}'>
<img src="https://spacehold.it/300x300/10.jpg" alt="">
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><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></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox({
thumbnails: true
});</code></pre>
</div>
</div>
<h4>YouTube & Vimeo Videos</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="//www.youtube.com/embed/zsJpUCWfyPE?rel=0&autoplay=1&fs=1" class="button lightbox" data-lightbox-gallery="video_gallery" title="Sed posuere consectetur est at lobortis.">
YouTube Video
</a>
<a href="//player.vimeo.com/video/15091562?title=0&byline=0&portrait=0&autoplay=1&badge=0" class="button lightbox" data-lightbox-gallery="video_gallery" title="Integer posuere erat a ante venenatis dapibus posuere velit aliquet.">
Vimeo Video
</a>
<a href="//www.viddler.com/embed/7c1804e8/?f=1&player=full&secret=30641456" class="button lightbox" data-lightbox-gallery="video_gallery" title="Maecenas faucibus mollis interdum.">
Viddler Video (Custom Formatter)
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><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></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox({
videoFormatter: {
"viddler": {
pattern: /(?:viddler\.com\/)((v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?\/]*)/,
format: function formatViddler(parts) {
return '//www.viddler.com/embed/' + parts[6];
}
}
}
});</code></pre>
</div>
</div>
<h4>Mobile</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/1200x900/1.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_mobile" data-lightbox-options='{"mobile":true}' title="">
<img src="https://spacehold.it/300x300/1.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/2.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_mobile" data-lightbox-options='{"mobile":true}' title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<img src="https://spacehold.it/300x300/2.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/3.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_mobile" data-lightbox-options='{"mobile":true}' title="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.">
<img src="https://spacehold.it/300x300/3.jpg" alt="">
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="large_1.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail_1.jpg" alt="">
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox({
mobile: true
});</code></pre>
</div>
</div>
<h4>Mobile without Viewer</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/1200x900/1.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_mobile" data-lightbox-options='{"mobile":true,"viewer":false}' title="">
<img src="https://spacehold.it/300x300/1.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/2.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_mobile" data-lightbox-options='{"mobile":true,"viewer":false}' title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<img src="https://spacehold.it/300x300/2.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/3.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_mobile" data-lightbox-options='{"mobile":true,"viewer":false}' title="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.">
<img src="https://spacehold.it/300x300/3.jpg" alt="">
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="large_1.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail_1.jpg" alt="">
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox({
mobile: true,
viewer: false
});</code></pre>
</div>
</div>
<h4>Fixed Positioning (desktop only)</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/1200x900/1.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_fixed" data-lightbox-options='{"fixed":true}' title="Curabitur blandit tempus porttitor.">
<img src="https://spacehold.it/300x300/1.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/2.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_fixed" data-lightbox-options='{"fixed":true}' title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<img src="https://spacehold.it/300x300/2.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/3.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_fixed" data-lightbox-options='{"fixed":true}' title="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.">
<img src="https://spacehold.it/300x300/3.jpg" alt="">
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="large.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail.jpg" alt="">
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox({
fixed: true
});</code></pre>
</div>
</div>
<h4>Top Positioning (desktop only)</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/1200x900/1.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_top" data-lightbox-options='{"top":25}' title="Curabitur blandit tempus porttitor.">
<img src="https://spacehold.it/300x300/1.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/2.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_top" data-lightbox-options='{"top":25}' title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<img src="https://spacehold.it/300x300/2.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/3.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="gallery_top" data-lightbox-options='{"top":25}' title="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.">
<img src="https://spacehold.it/300x300/3.jpg" alt="">
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="large.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail.jpg" alt="">
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox({
top: 25
});</code></pre>
</div>
</div>
<h4>In-Line Content</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="#hidden_content" class="button js-lightbox">Show Hidden Content</a>
</div>
<div id="hidden_content" style="display: none;">
<div class="inline_content">
<h2>Some Content!</h2>
<p>This was hidden on the page and loaded into the new Lightbox instance.</p>
<label>
<input type="checkbox" class=""> Testing a checkbox
</label>
</div>
</div>
<script>
Formstone.Ready(function() {
$("input[type=checkbox], input[type=radio]").checkbox();
});
</script>
</div>
<div class="demo_code">
<pre><code class="language-html"><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></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox();</code></pre>
</div>
</div>
<h4>jQuery Objects</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<button class="button js-lightbox_object">Show jQuery Object</button>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="#" class="launch_lightbox"
	Open jQuery Content
</a></code></pre>
<pre><code class="language-javascript">$(".launch_lightbox").click(launchLightbox);
function launchLightbox() {
var $content = $('<div class="inline_content"><h2>More Content!</h2></div>');
$.lightbox( $content );
}</code></pre>
</div>
</div>
<h4>iFrame</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://en.wikipedia.org/wiki/NASA" class="button js-lightbox" data-lightbox-options='{"maxHeight":600,"maxWidth":600}'>View NASA Entry</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="http://example.com" class="lightbox">
	Example.com
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox();</code></pre>
</div>
</div>
<h4>Sizing (desktop only)</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://en.wikipedia.org/wiki/NASA" class="button js-lightbox" data-lightbox-height="500" data-lightbox-width="500">View NASA Entry</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="http://example.com" class="lightbox" data-lightbox-height="500" data-lightbox-width="500">
	Example.com
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox();</code></pre>
</div>
</div>
<h4>Caption Formating</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/1200x900/1.jpg" class="lightbox_image js-lightbox_format" title="Curabitur blandit tempus porttitor.">
<img src="https://spacehold.it/300x300/1.jpg" alt="">
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="large.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail.jpg" alt="">
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox({
formatter: formatLightboxCaption
});
function formatLightboxCaption() {
return "<h3>" + $(this).attr("title") + "</h3>";
}</code></pre>
</div>
</div>
<!-- <h4>Retina Support</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/2400x1800/4.jpg" class="lightbox_image js-lightbox" data-lightbox-options='{"retina":true}' title="By Apollo 15 astronaut.Bubba73 at en.wikipedia [Public domain], from Wikimedia Commons">
<img src="https://spacehold.it/600x600/4.jpg" alt="">
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="large-2x.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail-2x.jpg" alt="">
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox({
retina: true
});</code></pre>
</div>
</div> -->
<h4>No Theme</h4>
<div class="demo_container">
<div class="demo_example">
<div class="gallery">
<a href="https://spacehold.it/1200x900/1.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="image_gallery_2" title="Curabitur blandit tempus porttitor." data-lightbox-options='{"theme":""}'>
<img src="https://spacehold.it/300x300/1.jpg" alt="">
</a>
<a href="https://spacehold.it/900x1200/2.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="image_gallery_2" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." data-lightbox-options='{"theme":""}'>
<img src="https://spacehold.it/300x300/2.jpg" alt="">
</a>
<a href="https://spacehold.it/1200x900/3.jpg" class="lightbox_image js-lightbox" data-lightbox-gallery="image_gallery_2" title="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." data-lightbox-options='{"theme":""}'>
<img src="https://spacehold.it/300x300/3.jpg" alt="">
</a>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="large.jpg" class="lightbox" title="Image caption text.">
	<img src="thumbnail.jpg" alt="">
</a></code></pre>
<pre><code class="language-javascript">$(".lightbox").lightbox({
theme: ""
});</code></pre>
</div>
</div>
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>