Home

Migrating to VenoBox 2

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

• selector Items to be initialized
• maxWidth Max content width
• ratio For Video and iFrames
• popup Open specific element on page load
• navSpeed Transition time to silde out items
• shareStyle 3 styles for the share buttons: 'block', 'pill', 'transparent', 'bar'
• titleStyle 3 styles for the titles: 'block', 'pill', 'transparent', 'bar'
• toolsBackground background color for title and share
• 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

• data-maxwidth overrides the global option maxWidth
• 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