Goodbye jQuery, and thanks for all the $()!

SInce version 2 VenoBox no longer needs jQuery

Same plugin but lighter, with more options, better performance, better UX and without dependencies.

UX Improvements

Shorten transitions time, load new item and fade out old item syncronized

Migrating to v2

Dependencies

Dropped jQuery. You don't need any external library.

New way to initialize venobox:

new Venobox({
    selector: '.venobox'
});

But if you love the jQuery style (or you are too lazy to update your old initializations), the old method is still supported, if the jQuery library is loaded:

$('.venobox').venobox();

Options

New Options

• [x] selector Items to be initialized
  
• [x] maxWidth Max content width
  
• [x] ratio For Video and iFrames
  
• [x] popup Open specific element on page load
  
• [x] navSpeed Transition time to silde out items
  
• [x] shareStyle 3 styles for the share buttons: 'block', 'pill', 'transparent', 'bar'
  
• [x] titleStyle 3 styles for the titles: 'block', 'pill', 'transparent', 'bar'
  
• [x] toolsBackground background color for title and share
  
• [x] toolsColor color for navigation tools
  

Renamed Options

• [ ] noArrows renamed to navigation (default: true)
  
• [ ] numeratio renamed to numeration
  
• [ ] cb_pre_open renamed to onPreOpen
  
• [ ] cb_post_open renamed to onPostOpen
  
• [ ] cb_pre_close renamed to onPreClose
  
• [ ] cb_after_nav renamed to onNavComplete
  
• [ ] cb_content_loaded renamed to onContentLoaded
  
• [ ] cb_init renamed to onInit
  

Deprecated Options

• [ ] cb_post_close
  
• [ ] closeBackground
  
• [ ] closeColor
  
• [ ] framewidth
  
• [ ] frameheight
  
• [ ] numerationBackground
  
• [ ] numerationColor
  
• [ ] numerationPosition
  
• [ ] titleBackground
  
• [ ] titleColor
  
• [ ] arrowsColor
  

Data attributes

New data attributes

• [x] data-maxwidth overrides the global option maxWidth
  
• [x] data-ratio overrides the global option ratio
  

Full list of current available options:

selector: '.venobox',
autoplay : false,
bgcolor: '#fff',
border: '0',
infinigall: false,
maxWidth: '1200px',
navigation: true,
navSpeed: 300,
numeration: false,
overlayClose: true,
overlayColor: 'rgba(23,23,23,0.85)',
popup: false,
ratio: '16x9', // Available: '1x1' | '4x3' | '16x9' | '21x9'
share: [], // ['facebook', 'twitter', 'linkedin', 'pinterest', 'email', 'download']
shareStyle: 'bar', // 'block', 'pill', 'transparent', 'bar'
spinner: 'bounce', // available: 'plane' | 'chase' | 'bounce' | 'wave' | 'pulse' | 'flow' | 'swing' | 'circle' | 'circle-fade' | 'grid' | 'fold' | 'wander'
spinColor : '#d2d2d2',
titleattr: 'title',
titlePosition: 'top', // 'top' || 'bottom'
titleStyle: 'bar', // 'block', 'pill', 'transparent', 'bar'
toolsBackground: '#1C1C1C', // 'transparent'
toolsColor: '#d2d2d2',
onPreOpen: function(){ return true; }, // Return the selected object - set return false to prevent opening
onPostOpen: function(){}, // Return: current_item, gallIndex, thenext, theprev
onPreClose: function(){ return true; }, // Return: current_item, gallIndex, thenext, theprev - set return false to prevent closing
onNavComplete: function(){}, // Return: current_item, gallIndex, thenext, theprev
onContentLoaded: function(){}, // Return: newcontent
onInit: function(){}, // Return: plugin obj