| venobox | ||
| demo.css | ||
| readme.html | ||
Hello world!
this is my inline content
Usage
Include VenoBox css and javascript after jQuery library
<!-- Add jQuery library --> <script type="text/javascript" src="https://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