The VenoBox is a jQuery lightbox iframe plugin which allows you to show text, images, and video. It’s the responsive, light-weight and multipurpose plugin.
Furthermore, its a multipurpose plugin which is useful if you want to open/popup the text or images in iFrame. You can easily configure it by using its parameters. No need for advance knowledge of jQuery requires.
Just do basic settings and you are done. The features of the plugin are really cool for basic and as well as advanced users. You can easily integrate the lightbox for iframe videos such as Youtube, Dailymotion or Vimeo.
In addition, the plugin supports AJAX and touch functionality. You will have a lot of options to configure it as you want. Not only this but you can also customize the styles through CSS.
How to Use jQuery Iframe Lightbox Plugin
To add the plugin into your webpage is easy. All you have to load the jQuery, Javascript and stylesheet before closing head tag.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- VenoBox JS --> <script src="js/venobox.js"></script> <!-- VenoBox CSS --> <link rel="stylesheet" href="css/venobox.css" type="text/css" media="screen" />
After that, you need to create HTML stature which is also simple. Let’s define the main container which is in our case is thumbs. Next, a child div (img-thumb) will hold the <img> tag which is wrapp with a link.
We will call venobox the class to make it work. If you want to show the title with popup image or video then use the data-title attribute.
<div class="thumbs">
<div class="img-thumb">
<a id="firstlink" class="venobox" data-gall="gall1" data-title="Breakfast Recipe - Basik" href="img/pic1.jpg">
<img src="img/pic1.jpg">
</a>
</div>
<div class="img-thumb">
<a class="venobox" data-gall="gall1" data-title="Twhater - Basik" href="img/pic2.jpg"><img src="img/pic2.jpg"></a>
</div>
<div class="img-thumb">
<a class="venobox" data-gall="gall1" data-title="Z series - TomoZ" href="img/pic3.jpg"><img src="img/pic3.jpg"></a>
</div>
<div class="img-thumb">
<a class="venobox" data-gall="gall1" data-title="Under Fest - TomoZ" href="img/pic5.jpg"><img src="img/pic5.jpg"></a>
</div>
<div class="img-thumb">
<a class="venobox" data-gall="gall1" data-title="Zona MC - Burla2222" href="img/pic4.jpg"><img src="img/pic4.jpg"></a>
</div>
</div>Finally, initialize the plugin by using the jQuery document ready function.
$(document).ready(function(){
$('.venobox').venobox();
});The plugin allows you to set the width and height for iFrame. You can also customize the border, background color and more.
$('.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
});