jQuery Plugins › jQuery LightBox Plugins › VenoBox

Full-featured Responsive Lightbox Plugin - VenoBox

File Size: 60.2 KB
Views Total: 29349
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE10+, FireFox, Opera, Safari#gallery lightbox
Full-featured Responsive Lightbox Plugin - VenoBox

VenoBox is a responsive & mobile-friendly JavaScript lightbox plugin used to overlay any html elements (like images, iframes, videos, etc...) on your current page.

Features:

  • Images and image lightbox gallery supported (possibility of navigation with keyboard arrows).
  • Ajax & inline content supported.
  • Youtube, Vimeo, HTML5 videos supported.
  • Iframes and google maps supported.
  • Accessible and touch-enabled.
  • Provides a scroll bar if the height of overlayed elements is tall than the window.
  • Share and Download buttons: Facebook, Twitter, LinkedIn, Pinterest.
  • Works with jQuery and Vanilla JavaScript.

Basic Usage:

1. Include required venobox.css and venobox.js on your web page.

<!-- Required For jQuery Version Only -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- venobox Plugin files -->
<link href="/path/to/venobox/venobox.css" rel="stylesheet" />
<script src="/path/to/venobox/venobox.js"></script>

2. Initialize the plugin and we're ready to go.

// jQuery Version
$('.venobox').venobox({
  // settings here
});

// Vanilla JS Version
new VenoBox();

3. Create a gallery lightbox from a group of images. Note that the images are grouped with the data-gall attribute. Otherwise it only shows a single image lightbox when you click on the thumbnail.

<a class="venobox" 
   data-gall="myGallery" 
   title="Image 1" 
   href="1.jpg">
   <img src="thumb.jpg" />
</a>
<a class="venobox" 
   data-gall="myGallery" 
   title="Image 2" 
   href="2.jpg">
   <img src="thumb.jpg" />
</a>
<a class="venobox" 
   data-gall="myGallery" 
   title="Image 3" 
   href="3.jpg">
   <img src="thumb.jpg" />
</a>

4. Display inline content in the lightbox.

<!-- Trigger element -->
<a class="venobox" 
   data-gall="myGallery" 
   data-title="inline content" 
   data-vbtype="inline" 
   href="#inline-content">
   Inline Content
</a>

<!-- Inline Content -->
<div id="inline-content" style="display:none;">
  Inline Content Here
</div>

5. Display iframe content in the lightbox.

<a class="venobox" 
   data-gall="iframe"  
   data-vbtype="iframe" 
   title="iFrame example" 
   href="https://example.com/">
   iFrame
</a>

6. Display AJAX content in the lightbox.

<a class="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 class="venobox" 
   data-gall="gall-video" 
   data-autoplay="true" 
   data-vbtype="video" 
   data-ratio="4x3"
   href="http://vimeo.com/75976293">
   Vimeo
</a>

<a class="venobox" 
   data-gall="gall-video" 
   data-autoplay="true" 
   data-vbtype="video" 
   href="https://youtu.be/bS5P_LAqiVg">
   YouTube
</a>

8. Optionally you can open a default item in the lightbox on page load by adding the #firstlink to the desired trigger element.

<a id="firstlink"
   class="venobox" 
   data-gall="myGallery" 
   title="Image 1" 
   href="1.jpg">
   <img src="thumb.jpg" />
</a>

9. Set the max width of the lightbox.

<a class="venobox" 
   data-maxwidth="600px" 
   title="My Description" 
   href="image-big.jpg">
   Open image
 </a>

10. Customize the background color of the overlay.

<a class="venobox" 
   data-overlay="rgba(95,164,255,0.8)"
   title="My Description" 
   href="image-big.jpg">
   Open image
 </a>

11. Available options to config the lightbox.

var venobox = new VenoBox({

    // Items selector
    selector: "",

    // color of navigation arrows
    // * jquery version only
    arrowsColor: '#B6B6B6',

    // same as data-autoplay
    autoplay: false, 

    // background color
    bgcolor: '#fff',

    // border
    border: '0',

    // custom CSS class
    customClass: false,

    // infinite loop
    // * vanilla JS version only
    infinigall: false,

    // max width
    // * vanilla JS version only
    maxWidth: "1200px",

    // navigation options
    // * vanilla JS version only
    navigation: true,
    navKeyboard: true,
    navTouch: true,
    navSpeed: 300,

    // show navigation number and total items in current gallery
    // * vanilla JS version only
    numeration: false,

    // background color of close button
    closeBackground: '#161617',

    // colr of close button
    closeColor: "#d2d2d2",

    // frame width/height
    // * jQuery version only
    framewidth: '',
    frameheight: '',

    // show items as a gallery
    // * jQuery version only
    gallItems: false,

    // custom controls
    // * jQuery version only
    htmlClose: '&times;',
    htmlNext: '<span>Next</span>',
    htmlPrev: '<span>Prev</span>',

    // background color of counter
    // * jQuery version only
    numerationBackground: '#161617',

    // counter color
    // * jQuery version only
    numerationColor: '#d2d2d2',

    // 'top' || 'bottom'
    // * jQuery version only
    numerationPosition: 'top', 

    // close the lightbox by clicking the background overlay
    overlayClose: true,

    // color of the background overlay
    overlayColor: 'rgba(23,23,23,0.85)',

    // show automatic popup on page load
    // * vanilla JS version only
    popup: "false",

    // '1x1' | '4x3' | '16x9' | '21x9' | 'full'
    // * vanilla JS version only
    ratio: "16x9",

    // show sharing buttons for images and videos
    // * vanilla JS version only
    share: false,

    // 'block' | 'pill' | 'transparent' | 'bar'
    // * vanilla JS version only
    shareStyle: 'bar',

    // jQuery version: 'rotating-plane' | 'double-bounce' | 'wave' | 'wandering-cubes' | 'spinner-pulse' | 'chasing-dots' | 'three-bounce' | 'circle' | 'cube-grid' | 'fading-circle' | 'folding-cube'
    // Vanilla JS version: 'plane' | 'chase' | 'bounce' | 'wave' | 'pulse' | 'flow' | 'swing' | 'circle' | 'circle-fade' | 'grid' | 'fold | 'wander'
    spinner: 'double-bounce', 

    // spinner color
    spinColor: '#d2d2d2',

    // same as data-title
    titleattr: 'title',

    // 'top' || 'bottom'
    titlePosition: 'top'

    // title background color
    // * jQuery version only
    titleBackground: '#161617',

    // title color
    // * jQuery version only
    titleColor: '#d2d2d2',

    // background color of title and share buttons
    // * vanilla JS version only
    toolsBackground: "#1C1C1C",

    // color of Title, Share buttons and gallery navigation
    // * vanilla JS version only
    toolsColor: '#d2d2d2',

    // jQuery selectors
    jQuerySelectors: false,

    // focus current element on window close
    focusItem: false,

    // resize the images to fit within the viewport
    fitView: false

    // initial scale
    initialScale: 0.9,

    // transition speed in ms
    transitionSpeed: 200

});

12. Callback functions.

// Vanilla JS Version
var venobox = new VenoBox({
    // Return the selected object - set return false to prevent opening
    onPreOpen: function(){ return true; }, 
    // Return: current_item, gallIndex, thenext, theprev
    onPostOpen: function(){}, 
    // Return: current_item, gallIndex, thenext, theprev - set return false to prevent closing
    onPreClose: function(){ return true; }, 
    // Return: current_item, gallIndex, thenext, theprev
    onNavComplete: function(){}, 
    // Return: newcontent
    onContentLoaded: function(){}, 
    // Return: plugin obj
    onInit: function(){}, 
});

// jQuery Version
$('.venobox').venobox({
  cb_pre_open: function(){ return true; }, 
  cb_post_open: function(){},
  cb_pre_close: function(){ return true; },
  cb_post_close: function(){},
  cb_post_resize: function(){},
  cb_after_nav: function(){},
  cb_content_loaded: function(){},
  cb_init: function(){}
});

13. API methods.

var venobox = new VenoBox();

// open a specific item
venobox.open('#my-link');

// close the lightbox
venobox.close();

// goto the next item
venobox.next(); 

// back to the prev item
venobox.prev();

// destroy the instance
venobox.destroy();

Changelog:

v2.1.8 (2024-04-29)

  • Update: Moved DOM initializations to object creation
  • Bugfixed

v2.1.7 (2024-04-10)

  • Update: New options initialScale and transitionSpeed

v2.1.6 (2024-01-26)

  • Update: use /youtube-nocookie.com/embed/ for all YouTube videos

v2.1.5 (2024-01-22)

  • Update: return false after function execution for onPostOpen and onPreClose

v2.1.4 (2024-01-03)

  • Fix: Enable Wave preloader

v2.1.3 (2023-12-05)

  • Update: Max width proportional to aspect ratio

v2.1.2 (2023-12-05)

  • Update: Global fitView option can be set also as data attribute data-fitview to specific links

v2.1.1 (2023-12-03)

  • Fix: preload timing sync for gallery navigation

v2.1.0 (2023-12-02)

  • Fix: Random flickering during gallery navigation with iOS

v2.0.9 (2023-11-29)

  • Fix: Swiping doesn't work on Android devices

v2.0.8 (2023-11-19)

  • Fix: overlayClose does not work
  • Update: Video Handling - Unknown Extension Types

v2.0.7 (2023-11-18)

  • New option: fitView resizes the images to fit within the viewport
  • Fix: minimum 3 items to activate infinite gallery

v2.0.6 (2023-11-18)

  • Update: composer version

v2.0.5 (2022-03-09)

  • New option: focusItem to focus current element on window close
  • Update: youtube-nocookie support

v2.0.4 (2021-12-17)

  • New option: customClass
  • New attribute: data-customclass (overrides global option customClass)
  • New attribute: data-border (overrides global option border)
  • New: option ratio: 'full' for a 100% viewport height of iFrame and video content

v2.0.3 (2021-12-13)

  • New: Fast gallery navigation

v2.0.0 (2021-12-08)

  • Rewritten in Vanilla JavaScript.

v1.9.4 (2021-11-17)

  • JS Update

 

This awesome jQuery plugin is developed by nicolafranchini. For more Advanced Usages, please check the demo page or visit the official website.