jQuery Viewbox Plugin Demos

Start by including the ViewBox CSS and Javascript

<link rel="stylesheet" href="viewbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.viewbox.min.js"></script>

HTML Example

Optional: Add a title attribute if you want to show a caption.

<a href="images/i1.jpg" class="image-link">
	<img src="images/i1-thumb.jpg" alt="">
</a>
<a href="images/i2.jpg" class="image-link" title="Image Title">
	<img src="images/i2-thumb.jpg" alt="">
</a>
<a href="images/i3.jpg" class="image-link">
	<img src="images/i3-thumb.jpg" alt="">
</a>

Initializing ViewBox

Apply viewbox() method to a set of image links.

$(function(){
	$('.image-link').viewbox();
});

Options

These options are default.

$(function(){
	$('.image-link').viewbox({
		setTitle: true,
		margin: 20,
		resizeDuration: 300,
		openDuration: 200,
		closeDuration: 200,
		closeButton: true,
		navButtons: true,
		closeOnSideClick: true,
		nextOnContentClick: true
	});
});