WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

LIGHTBOX

  1. Home
  2. Shortcodes
  3. Lightbox

Gallery Lightbox Group

... ... ... ... ... ... ... ... ... ... ... ...
Show Code 
<div class="masonry-gallery columns-5 clearfix lightbox" data-img-big="1" data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'>

	<a class="image-hover" href="assets/images/demo/1200x800/24-min.jpg">
		<img src="assets/images/demo/600x400/24-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/25-min.jpg">
		<img src="assets/images/demo/600x400/25-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/26-min.jpg">
		<img src="assets/images/demo/600x400/26-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/27-min.jpg">
		<img src="assets/images/demo/600x400/27-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/28-min.jpg">
		<img src="assets/images/demo/600x400/28-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/29-min.jpg">
		<img src="assets/images/demo/600x400/29-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/30-min.jpg">
		<img src="assets/images/demo/600x400/30-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/31-min.jpg">
		<img src="assets/images/demo/600x400/31-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/32-min.jpg">
		<img src="assets/images/demo/600x400/32-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/33-min.jpg">
		<img src="assets/images/demo/600x400/33-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/34-min.jpg">
		<img src="assets/images/demo/600x400/34-min.jpg" alt="...">
	</a>

	<a class="image-hover" href="assets/images/demo/1200x800/35-min.jpg">
		<img src="assets/images/demo/600x400/35-min.jpg" alt="...">
	</a>

</div>

Gallery Lightbox Single Image

... ... ... ... ...
Show Code 
<!--
	image-hover-icon supports two classes:
		image-hover-dark - dark hover background
		image-hover-light - light hover background
-->


<div class="masonry-gallery columns-5 clearfix">

	<a class="image-hover lightbox" href="assets/images/demo/1200x800/28-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="image-hover-icon image-hover-dark">
			<i class="fa fa-search-plus"></i>
		</span>
		<img src="assets/images/demo/600x400/28-min.jpg" alt="...">
	</a>

	<a class="image-hover lightbox" href="assets/images/demo/1200x800/25-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="image-hover-icon image-hover-dark">
			<i class="fa fa-search-plus"></i>
		</span>
		<img src="assets/images/demo/600x400/25-min.jpg" alt="...">
	</a>

	<a class="image-hover lightbox" href="assets/images/demo/1200x800/36-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="image-hover-icon image-hover-dark">
			<i class="fa fa-search-plus"></i>
		</span>
		<img src="assets/images/demo/600x400/36-min.jpg" alt="...">
	</a>

	<a class="image-hover lightbox" href="assets/images/demo/1200x800/13-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="image-hover-icon image-hover-dark">
			<i class="fa fa-search-plus"></i>
		</span>
		<img src="assets/images/demo/600x400/13-min.jpg" alt="...">
	</a>

	<a class="image-hover lightbox" href="assets/images/demo/1200x800/14-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="image-hover-icon image-hover-dark">
			<i class="fa fa-search-plus"></i>
		</span>
		<img src="assets/images/demo/600x400/14-min.jpg" alt="...">
	</a>

</div>

Video Lightbox

... ...
Show Code 
<!--
	image-hover-icon supports two classes:
		image-hover-dark - dark hover background
		image-hover-light - light hover background
-->


<div class="masonry-gallery columns-2 clearfix">

	<!-- Vimeo -->
	<a class="image-hover lightbox" href="http://vimeo.com/56624256" data-plugin-options='{"type":"iframe"}'>
		<span class="image-hover-icon image-hover-light">
			<i class="fa fa-vimeo-square"></i>
		</span>
		<img src="assets/images/demo/600x400/4-min.jpg" alt="...">
	</a>

	<!-- Youtube -->
	<a class="image-hover lightbox" href="http://www.youtube.com/watch?v=W7Las-MJnJo" data-plugin-options='{"type":"iframe"}'>
		<span class="image-hover-icon image-hover-dark">
			<i class="fa fa-youtube-play"></i>
		</span>
		<img src="assets/images/demo/600x400/3-min.jpg" alt="...">
	</a>

</div>

Ajax & GoogleMap Lightbox

Ajax Lightbox GoogleMap Lightbox
Show Code 
<!-- Ajax -->
<a class="btn btn-default btn-lg lightbox" href="ajax/dummy-lightbox.html" data-lightbox="iframe" data-plugin-options='{"type":"ajax", "closeOnBgClick":false}'>Ajax Lightbox</a>

<!-- GoogleMap -->
<a class="btn btn-primary btn-lg lightbox" href="https://maps.google.com/maps?q=Silicon+Valley,+CA,+USA&hl=en" data-lightbox="iframe" data-plugin-options='{"type":"iframe"}'>GoogleMap Lightbox</a>