Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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

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

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>

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();


These options are default.

		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. Opens Viewbox (if it is not already opened). Example: vb.trigger('',[index]);. index - index of item to show (0 default)

viewbox.close Closes Viewbox (if it is not already closed). Example: vb.trigger('viewbox.close');. Shows next image in the set. Example: vb.trigger('');.

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


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

You can’t perform that action at this time.