Full-featured Responsive Lightbox Plugin – VenoBox

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.