ViewBox Demo

Viewbox is a jQuery plugin for displaying images and other HTML content.   Download on GitHub


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=""></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 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 href="userfiles/file/viewbox/demo/images/i3.jpg" class="image-link">
	<img src="userfiles/file/viewbox/demo/images/i3-thumb.jpg" alt="">

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


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>

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

	var vb = $('.popup-link').viewbox();
	//optional: custom close button

Or apply viewbox() method to a content element.

	var vb = $('#popup').viewbox();


Open popup window



These options are default.

		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.
Opens Viewbox (if it is not already opened)
Example: var vb = $('a.viewbox').viewbox();

index - index of item to show (0 default)
Closes Viewbox (if it is not already closed)
Example: var vb = $('a.viewbox').viewbox();
Shows next image in the set.
Example: var vb = $('a.viewbox').viewbox();
Shows previous image in the set.
Example: var vb = $('a.viewbox').viewbox();
back to home