ViewBox Demo

Start by including the ViewBox CSS and Javascript. Requires jQuery 1.12.0 or higher (dosen't work with the slim build).

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

Viewbox as Image Viewer

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

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

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

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

Viewbox and Custom HTML Content

Make an anchor link which points to content element.

<p><a href="#popup" class="popup-link">Open popup window</a></p>
<p><button type="button" class="popup-open-button">Open popup window</button></p>

<!-- Use invisible wraper to hide popup window content -->
<div style="display:none;">
	<div id="popup">
		<h3>Popup content</h3>
		<p>Some text for popup window.</p>
		<p><button type="button" class="close-button">Close</button></p>
	</div>
</div>

Apply viewbox() method to an anchor link which points to content element.

$(function(){
	var vb = $('.popup-link').viewbox();
	
	//optional: custom close button
	$('.close-button').click(function(){
		vb.trigger('viewbox.close');
	});
});

Or apply viewbox() method to a content element.

$(function(){
	var vb = $('#popup').viewbox();
	
	$('.popup-open-button').click(function(){
		vb.trigger('viewbox.open');
	});
});

Demo

Open popup window

Open popup window

Options

These options are default.

$(function(){
	$('.image-link').viewbox({
		setTitle: true,
		margin: 20,
		resizeDuration: 300,
		openDuration: 200,
		closeDuration: 200,
		closeButton: true,
		fullscreenButton: false,
		navButtons: true,
		closeOnSideClick: true,
		nextOnContentClick: false,
		useGestures: true,
		imageExt: ['png','jpg','jpeg','webp','gif'] //to determine if a target url is an image file
	});
});

Custom events

There are some of custom events you can use to control Viewbox. To trigger these custom events, simply target the object created by the plugin.

viewbox.open

Opens Viewbox (if it is not already opened)
Example: var vb = $('a.viewbox').viewbox();
vb.trigger('viewbox.open',[index]);
index - index of item to show (0 default)

viewbox.close

Closes Viewbox (if it is not already closed)
Example: var vb = $('a.viewbox').viewbox();
$('.button-close').click(function(){
  vb.trigger('viewbox.close');
});

viewbox.next

Shows next image in the set.
Example: var vb = $('a.viewbox').viewbox();
vb.trigger('viewbox.next');

viewbox.prev

Shows previous image in the set.
Example: var vb = $('a.viewbox').viewbox();
vb.trigger('viewbox.prev');