Lightbox


We included a custom built lightbox. It's very simple to use and supports single image, image carousel and ajax loaded content. Just create <a href="single_image.jpg" class="open-overlay"> and it's done!. By changing href to .php or .html file you can load gallery. There is one template of overlay gallery (gallery.php file).

<section id="gallery">	
	<div class="gallery-content">
		<article class="pull-right gallery-text">
			<a class="close-button"><i class="icon-close"></i></a>
			<header>
				<h2>
					Photo
				</h2>
				<h4>lorem ipsum dolor sit</h4>
			</header>
			<p class="gallery-description">
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id ultricies ut vehicula ut id. Integer posuere erat a venenatis dapibus posuere velit aliquet duis mollis. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.
			</p>
			<ul class="sharer">
				<li>
					<a href="#" data-hover="facebook" >facebook</a>
				</li>
				<li>
					<a href="#" data-hover="linkedin">linkedin</a>
				</li>
				<li>
					<a href="#" data-hover="google+">google+</a>
				</li>
				<li>
					<a href="#" data-hover="twitter">twitter</a>
				</li>
			</ul>
		</article>
		<div class="gallery pull-left">
			<div class="loading-spinner"></div>			
			<div id="images" class="owl-carousel owl-theme">
				<div class="item"><figure><img src="img/img-gallery/1.jpg" /></figure></div>
				<div class="item"><figure><img src="img/img-gallery/2.jpg" /></figure></div>
				<div class="item"><figure><img src="img/img-gallery/3.jpg" /></figure></div>
				<div class="item"><figure><img src="img/img-gallery/4.jpg" /></figure></div>
			</div>
			<div class="controls"></div>
		</div>
	</div>
</section>