jQuery VenoBox Examples

Image gallery (possibility of navigation with keyboard arrows)

pictures by: Basik, TomoZ

Various links

iFrame G maps Vimeo YouTube Ajax Inline

Usage

Include VenoBox css and javascript after jQuery library

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add venobox -->
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>

Insert one or more links with its custom class

<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
<a class="venobox_custom" data-type="iframe" href="http://www.veno.it">open iFrame</a>

For Google Maps use the iFrame href attribute of map's embed code and set data-type="iframe"

For videos use the simple url of the video, such as: http://www.vimeo.com/your_video_id, or http://www.youtu.be/your_video_id

For inline contents set a hidden element with custom id, and call it from your link href

Initialize plugin

$(document).ready(function(){

	/* default settings */
	$('.venobox').venobox(); 


	/* open content with custom settings */
	$('.venobox_custom').venobox({
		framewidth: '300px',
		frameheight: '250px',
		border: '6px',
		bordercolor: '#ba7c36',
		numeratio: true
	});

	/* auto-open #firstlink on page load */
	$("#firstlink").venobox().trigger('click');
});

Gallery

To activate navigation between every type of content assign the same data attribute "data-gall" to each link, like the example below

<a class="venobox" data-gall="myGallery" href="image01-big.jpg"><img src="image01-small.jpg" /></a>
<a class="venobox" data-gall="myGallery" href="image02-big.jpg"><img src="image02-small.jpg" /></a>
<a class="venobox" data-gall="myGallery" href="image03-big.jpg"><img src="image03-small.jpg" /></a>

Options

If the content is not an image you have to specify its type via data attribute "data-type"

Available values: iframe inline ajax youtube vimeo

<a class="venobox" data-type="iframe" href="http://www.veno.it">Open Iframe</a>
<a class="venobox" data-type="inline" title="My Description" href="#inline">Open inline content</a>
<a class="venobox" data-type="ajax" href="ajax-call.php">Retrieve data via Ajax</a>
<a class="venobox" data-type="youtube" href="http://youtu.be/d85gkOXeXG4">Open YouYbe video</a>
<a class="venobox" data-type="vimeo" href="http://vimeo.com/75976293">Open Vimeo video</a>

Optional: set title attribute to show a description

Additional settings

Customize the popup window via JavaScript

numeratio: show navigation number and total items in current gallery - default: false

border: border thickness of the popup window in pixel - default: '0px'

bgcolor:background color of popup window (also affects border color, if has a border) - default: '#ffffff'

framewidth: you can set a static window width, otherwise the plugin will keep the responsive size settings of .venoframe class

frameheight: you can set a static window height, otherwise the plugin will keep the responsive size settings of .venoframe class