Yet Another jQuery Responsive Lightbox Plugin - VenoBox

Yet Another jQuery Responsive Lightbox Plugin - VenoBox
File Size: 13.7 KB
Views Total:
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.

Basic Usage:

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

<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />

2. Create a link to open a lightbox with inline content.

<a class="demo"data-type="inline" href="#inline-content" title="My Lightbox">Inline</a>

3. Create the inline content.

<div id="inline-content" style="display:none;">
YOUR CONTENT HERE
</div>

4. Call the plugin with options.

$(document).ready(function(){
$('.demo').venobox({
framewidth: '300px',
frameheight: '200px',
border: '2px',
bgcolor: '#fff',
numeratio: false
});
})

5. Default options and callback functions.

arrowsColor : '#B6B6B6',
autoplay : false, // same as data-autoplay - thanks @codibit
bgcolor: '#fff',
border: '0',
closeBackground : '#161617',
closeColor : '#d2d2d2',
framewidth: '',
frameheight: '',
infinigall: false,
numeratio: false,
numerationBackground : '#161617',
numerationColor : '#d2d2d2',
numerationPosition : 'top', // 'top' || 'bottom'
overlayClose: true, // disable overlay click-close - thanx @martybalandis
overlayColor : 'rgba(23,23,23,0.85)',
spinner : 'double-bounce', // available: 'rotating-plane' | 'double-bounce' | 'wave' | 'wandering-cubes' | 'spinner-pulse' | 'three-bounce' | 'cube-grid'
spinColor : '#d2d2d2',              
titleattr: 'title', // specific attribute to get a title (e.g. [data-title]) - thanx @mendezcode
titleBackground: '#161617',
titleColor: '#d2d2d2',
titlePosition : 'top', // 'top' || 'bottom'
pre_open_callback: function(){ return true; }, // Callbacks - thanx @garyee
post_open_callback: function(){},
pre_close_callback: function(){ return true; },
post_close_callback: function(){},
post_resize_callback: function(){}

Change logs:

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)

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.