In many cases, we need to use Video content on our websites. Normally we can show a video by iframe or linked up the video link and redirect the user to the video. If we redirect the user from our site to another site the user will not stay on your site for a long time. And if we use iframe we need more space in our database to store the media files. So, here we can use several jquery plugins to show media files on our sites directly. Amongst these, one of the most useful and responsive jQuery Lightbox plugins is Venobox. The specialty of this plugin is it is flexible for all types of devices and easy to use. Venobox is suitable for images, inline contents, iFrames, Google-Maps, Ajax requests, Vimeo and YouTube videos
Here is a demo:
How to use this plugin:
We need to Include venobox.css into the HTML <head>
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />Include venobox.min.js into the footer, after the jQuery library
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="venobox/venobox.min.js"></script>
What should we write in html code:
For images:
<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>For video :
<a class="venobox_custom" data-vbtype="iframe" href="http://example.com/">open iFrame</a>For Google Maps use the iFrame href attribute of map’s embed code and set data-vbtype=”iframe”
Initialize plugin default settings
$(document).ready(function(){
$('.venobox').venobox();
});
We can Customize the settings
$('.venobox_custom').venobox({
framewidth : '400px', // default: ''
frameheight: '300px', // default: ''
border : '10px', // default: '0'
bgcolor : '#5dff5e', // default: '#fff'
titleattr : 'data-title', // default: 'title'
numeratio : true, // default: false
infinigall : true, // default: false
share : ['facebook', 'twitter', 'download'] // default: []
});
That’s it. To explore more advanced usages and details please visit VenoBox
Leave a Reply