ViewBox

Viewbox is a jQuery plugin for displaying images and other HTML content. Demo page

$(function(){
	$('.thumbnail').viewbox();
});

<a href="images/i1.jpg" class="thumbnail">
	<img src="images/i1.jpg" alt="">
</a>
<a href="images/i2.jpg" class="thumbnail" title="Image 2 title">
	<img src="images/i2.jpg" alt="">
</a>
<a href="images/i3.jpg" class="thumbnail" data-viewbox-title="Image 3 title">
	<img src="images/i3.jpg" alt="">
</a>

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>
<!-- 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');
	});
});

Options

These options are default.

$(function(){
	$('.thumbnail').viewbox({
		setTitle: true //add caption if link has title attribute
		,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: vb.trigger('viewbox.open',[index]);. index - index of item to show (0 default)

viewbox.close Closes Viewbox (if it is not already closed). Example: vb.trigger('viewbox.close');.

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

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

License

Copyright (c) 2015 Pavel Khoroshkov. Licensed under the MIT license.