Full-featured jQuery Responsive Lightbox Plugin - VenoBox

Full-featured jQuery Responsive Lightbox Plugin - VenoBox
File Size: 23.2 KB
Views Total: 19329
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

VenoBox is a responsive & mobile device-friendly jQuery 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 videos supported.
  • Iframes and google maps supported.
  • Provides a scroll bar if the height of overlayed elements is tall than the window.
  • Share and Download buttons: Facebook, Twitter, LinkedIn, Pinterest.

Basic Usage:

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

<link href="/path/to/venobox/venobox.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/venobox/venobox.js"></script>

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

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

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" 
   href="ajax.php">
   Ajax
</a>

7. Embed Youtube or Vimeo video into the lightbox.

<a class="venobox" 
   data-gall="gall-video" 
   data-autoplay="true" 
   data-vbtype="video" 
   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. Customization options.

$('.venobox').venobox({

  // color of navigation arroes
  arrowsColor : '#B6B6B6',

  // same as data-autoplay
  autoplay : false, 

  // background color
  bgcolor: '#fff',

  // border
  border: '0',

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

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

  // frame width/height
  framewidth: '',
  frameheight: '',

  // show items as a gallery
  gallItems: false,

  // infinite loop
  infinigall: false,

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

  // shows counter
  numeratio: false,

  // background color of counter
  numerationBackground : '#161617',

  // counter color
  numerationColor : '#d2d2d2',

  // 'top' || 'bottom'
  numerationPosition : 'top', 

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

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

  // available: 'rotating-plane' | 'double-bounce' | 'wave' | 'wandering-cubes' | 'spinner-pulse' | 'chasing-dots' | 'three-bounce' | 'circle' | 'cube-grid' | 'fading-circle' | 'folding-cube'
  spinner : 'double-bounce', 

  // spinner color
  spinColor : '#d2d2d2',

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

  // title background color
  titleBackground: '#161617',

  // title color
  titleColor: '#d2d2d2',

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

});

10. Callback functions.

$('.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(){}

});

Changelog:

v1.9.3 (2021-03-16)

v1.9.2 (2020-12-31)

  • Remove focus from link to avoid multiple calls with enter key

v1.9.1 (2020-08-13)

  • Fix: Error thrown in Safari

v1.9.0 (2020-05-24)

  • Update: reset content scrollTop on change

v1.8.9 (2020-03-18)

  • Added share buttons: ['facebook', 'twitter', 'linkedin', 'pinterest', 'download']

v1.8.8 (2020-03-17)

  • Hide navigation and counter if has only 1 item
  • Higher z-index for vbox-overlay

v1.8.7 (2020-03-16)

  • Percentual window padding
  • Minified CSS
  • Doc updated
  • Demo updated

v1.8.6 (2019-06-27)

  • Namespaced some css classes

v1.8.5 (2018-08-27)

  • New callback: cb_content_loaded(obj, gallIndex, thenext, theprev)

v1.8.4 (2018-08-18)

  • Fixed: Scrollbar dissappears behind vbox-overlay background (Chrome)

v1.8.3 (2018-03-19)

  • fix: different spinner for each call

v1.8.2 (2017-06-26)

  • Fix: infinigall & nextok = false

v1.8.1 (2017-05-13)

  • update

v1.8.0 (2017-04-24)

  • update

v1.7.3 (2017-03-21)

  • brought back 'data-gall'instaed of 'data-vbgall'

v1.7.2 (2017-03-17)

  • fix: galery navigation with different title attributes

v1.7.1 (2017-03-01)

  • New: autoplay option

v1.7.0 (2017-02-27)

  • Update venobox.js

v1.6.0 (2015-11-02)

  • Update venobox.js

v1.5.3 (2015-04-17)

  • Update venobox.js

v1.5.2 (2014-10-21)

  • Update venobox.js

v1.5.1 (2014-09-25)

  • Update venobox.js

v1.5.0 (2014-09-25)

  • Update venobox.js

v1.4.0 (2014-07-18)

  • Update CSS: overflow fix

v1.3.4 (2014-06-29)

  • Update CSS: overflow fix

v1.3.3 (2014-04-06)

  • Update CSS: overflow fix

v1.3.2 (2014-03-20)

  • Update CSS: overflow fix

v1.3.1 (2014-03-17)

  • update

v1.3.0 (2014-03-16)

  • update

v1.2.3 (2014-03-06)

  • update

 


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