Simple Lightbox

Simple Lightbox - Touch-friendly image lightbox for mobile and desktop with jQuery

Features

• responsive
• touchfriendly 
  swipe gestures for next/previous image
• easy to install, easy to use
• minimalistic
  Only some css is included. You can change the style like you want!
• lots of options
• preloading next and previous image
• Android, iOs and Windows phone support
• CSS3 Transitions with fallback for older browsers
• Can use jQuery 1.x or 2.x
• Keyboard support

Source: andreknieriem.de

1. INCLUDE CSS AND JS FILES

<link href='../dist/simplelightbox.min.css' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="../dist/simple-lightbox.js"></script>

2. HTML

<div class="gallery">	
	<a href="images/image1.jpg" class="big"><img src="images/thumbs/thumb1.jpg" alt="" title="Beautiful Image" /></a>
	<a href="images/image2.jpg"><img src="images/thumbs/thumb2.jpg" alt="" title=""/></a>
	<a href="images/image3.jpg"><img src="images/thumbs/thumb3.jpg" alt="" title="Beautiful Image"/></a>
	<a href="images/image4.jpg"><img src="images/thumbs/thumb4.jpg" alt="" title=""/></a>
	<div class="clear"></div>
	
	<a href="images/image5.jpg"><img src="images/thumbs/thumb5.jpg" alt="" title=""/></a>
	<a href="images/image6.jpg"><img src="images/thumbs/thumb6.jpg" alt="" title=""/></a>
	<a href="images/image7.jpg" class="big"><img src="images/thumbs/thumb7.jpg" alt="" title=""/></a>
	<a href="images/image8.jpg"><img src="images/thumbs/thumb8.jpg" alt="" title=""/></a>
	<div class="clear"></div>
	
	<a href="images/image9.jpg" class="big"><img src="images/thumbs/thumb9.jpg" alt="" title=""/></a>
	<a href="images/image10.jpg"><img src="images/thumbs/thumb10.jpg" alt="" title=""/></a>
	<a href="images/image11.jpg"><img src="images/thumbs/thumb11.jpg" alt="" title=""/></a>
	<a href="images/image12.jpg"><img src="images/thumbs/thumb12.jpg" alt="" title=""/></a>
	<div class="clear"></div>
	
</div>

3. JAVASCRIPT

$(function(){
	var gallery = $('.gallery a').simpleLightbox();
});

4. OPTIONS

5. EVENTS

Example

$('.gallery a').on('open.simplelightbox', function () {
  // do something…
});

6. METHODS

Example

var gallery = $('.gallery a').simpleLightbox();

gallery.next(); // Next Image