VenoBox is a responsive & mobile-friendly JavaScript lightbox plugin used to overlay any html components (like pictures, iframes, videos, and so on…) in your present web page.
Options:
- Photographs and picture lightbox gallery supported (risk of navigation with keyboard arrows).
- Ajax & inline content material supported.
- Youtube, Vimeo, HTML5 movies supported.
- Iframes and google maps supported.
- Accessible and touch-enabled.
- Offers a scroll bar if the peak of overlayed components is tall than the window.
- Share and Obtain buttons: Fb, Twitter, LinkedIn, Pinterest.
- Works with jQuery and Vanilla JavaScript.
Fundamental Utilization:
1. Embody required venobox.css and venobox.js in your internet web page.
<!-- Required For jQuery Model Solely --> <script src="/path/to/cdn/jquery.min.js"></script> <!-- venobox Plugin information --> <hyperlink href="/path/to/venobox/venobox.css" rel="stylesheet" /> <script src="/path/to/venobox/venobox.js"></script>
2. Initialize the plugin and we’re able to go.
// jQuery Model
$('.venobox').venobox({
// settings right here
});
// Vanilla JS Model
new VenoBox();
3. Create a gallery lightbox from a bunch of pictures. Notice that the photographs are grouped with the data-gall attribute. In any other case it solely reveals a single picture lightbox while you click on on the thumbnail.
<a category="venobox" data-gall="myGallery" title="Picture 1" href="1.jpg"> <img src="thumb.jpg" /> </a> <a category="venobox" data-gall="myGallery" title="Picture 2" href="2.jpg"> <img src="thumb.jpg" /> </a> <a category="venobox" data-gall="myGallery" title="Picture 3" href="3.jpg"> <img src="thumb.jpg" /> </a>
4. Show inline content material within the lightbox.
<!-- Set off ingredient --> <a category="venobox" data-gall="myGallery" data-title="inline content material" data-vbtype="inline" href="#inline-content"> Inline Content material </a> <!-- Inline Content material --> <div id="inline-content" type="show:none;"> Inline Content material Right here </div>
5. Show iframe content material within the lightbox.
<a category="venobox" data-gall="iframe" data-vbtype="iframe" title="iFrame instance" href="https://instance.com/"> iFrame </a>
6. Show AJAX content material within the lightbox.
<a category="venobox" data-gall="iframe" data-vbtype="ajax" data-ratio="16x9" href="ajax.php"> Ajax </a>
7. Embed Youtube, Vimeo, or HTML5 video into the lightbox.
<a category="venobox" data-gall="gall-video" data-autoplay="true" data-vbtype="video" data-ratio="4x3" href="http://vimeo.com/75976293"> Vimeo </a> <a category="venobox" data-gall="gall-video" data-autoplay="true" data-vbtype="video" href="https://youtu.be/bS5P_LAqiVg"> YouTube </a>
8. Optionally you may open a default merchandise within the lightbox on web page load by including the #firstlink to the specified set off ingredient.
<a id="firstlink" class="venobox" data-gall="myGallery" title="Picture 1" href="1.jpg"> <img src="thumb.jpg" /> </a>
9. Set the max width of the lightbox.
<a category="venobox" data-maxwidth="600px" title="My Description" href="image-big.jpg"> Open picture </a>
10. Customise the background coloration of the overlay.
<a category="venobox" data-overlay="rgba(95,164,255,0.8)" title="My Description" href="image-big.jpg"> Open picture </a>
11. Out there choices to config the lightbox.
var venobox = new VenoBox( 'circle-fade' );
12. Callback capabilities.
// Vanilla JS Model
var venobox = new VenoBox({
// Return the chosen object - set return false to stop opening
onPreOpen: perform(){ return true; },
// Return: current_item, gallIndex, thenext, theprev
onPostOpen: perform(){},
// Return: current_item, gallIndex, thenext, theprev - set return false to stop closing
onPreClose: perform(){ return true; },
// Return: current_item, gallIndex, thenext, theprev
onNavComplete: perform(){},
// Return: newcontent
onContentLoaded: perform(){},
// Return: plugin obj
onInit: perform(){},
});
// jQuery Model
$('.venobox').venobox({
cb_pre_open: perform(){ return true; },
cb_post_open: perform(){},
cb_pre_close: perform(){ return true; },
cb_post_close: perform(){},
cb_post_resize: perform(){},
cb_after_nav: perform(){},
cb_content_loaded: perform(){},
cb_init: perform(){}
});
13. API strategies.
var venobox = new VenoBox();
// open a selected merchandise
venobox.open('#my-link');
// shut the lightbox
venobox.shut();
// goto the subsequent merchandise
venobox.subsequent();
// again to the prev merchandise
venobox.prev();
// destroy the occasion
venobox.destroy();
Changelog:
v2.0.8 (2023-11-19)
- Repair: overlayClose doesn’t work
- Update: Video Dealing with – Unknown Extension Sorts
v2.0.7 (2023-11-18)
- New choice: fitView resizes the photographs to suit inside the viewport
- Repair: minimal 3 gadgets to activate infinite gallery
v2.0.6 (2023-11-18)
v2.0.5 (2022-03-09)
- New choice: focusItem to focus present ingredient on window shut
- Replace: youtube-nocookie assist
v2.0.4 (2021-12-17)
- New choice: customClass
- New attribute: data-customclass (overrides international choice customClass)
- New attribute: data-border (overrides international choice border)
- New: choice ratio: ‘full’ for a 100% viewport peak of iFrame and video content material
v2.0.3 (2021-12-13)
- New: Quick gallery navigation
v2.0.0 (2021-12-08)
- Rewritten in Vanilla JavaScript.
v1.9.4 (2021-11-17)
This superior jQuery plugin is developed by nicolafranchini. For extra Superior Usages, please verify the demo web page or go to the official web site.

