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
• customClass Custom class for the main wrapper .vbox-overlay
• maxWidth Max content width
• navKeyboard Max content width
• navTouch 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-border overrides the global option border
• data-maxwidth overrides the global option maxWidth
• data-ratio overrides the global option ratio

Renamed attributes

• data-css renamed to data-customclass overrides the global option customClass

Full list of currently available options:

selector: '.venobox',
autoplay : false,
bgcolor: '#fff',
border: '0',
customClass: false,
infinigall: false,
maxWidth: '100%',
navigation: true,
navKeyboard: true,
navTouch: true,
navSpeed: 300,
numeration: false,
overlayClose: true,
overlayColor: 'rgba(23,23,23,0.95)',
popup: false,
ratio: '16x9', // '1x1' | '4x3' | '16x9' | '21x9' | 'full'
share: false,
shareStyle: 'pill', // 'bar' | 'block' | 'pill' | 'transparent'
spinner: 'bounce', // 'plane' | 'chase' | 'bounce' | 'wave' | 'pulse' | 'flow' | 'swing' | 'circle' | 'circle-fade' | 'grid' | 'fold' | 'wander'
spinColor : '#d2d2d2',
titleattr: 'title',
titlePosition: 'top', // 'top' || 'bottom'
titleStyle: 'bar', // 'bar' | 'block' | 'pill' | 'transparent'
toolsBackground: '#1C1C1C', // 'transparent'
toolsColor: '#d2d2d2',