VenoBox 2

Just another jQuery Vanilla JS Lightbox plugin, suitable for Images, Videos, Inline contents, iFrames, Ajax requests.

The big difference compared to many others modal-window plugins is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window. (so in small devices you can scroll down the content, avoiding vertical microscopic resized images).

Demo

Image gallery

Touch Swipe and Arrow Keys navigation enabled

<a class="my-image-links" data-gall="gallery01" href="image01-big.jpg"><img src="image01-small.jpg"></a>
<a class="my-image-links" data-gall="gallery01" href="image02-big.jpg"><img src="image02-small.jpg"></a>
new VenoBox({
    selector: '.my-image-links',
    numeration: true,
    infinigall: true,
    share: ['facebook', 'twitter', 'linkedin', 'pinterest', 'download'],
    spinner: 'rotating-plane'
});

Video

Supported videos from Vimeo and YouTube. Local videos can be mp4, ogg, webm

<a class="my-video-links" data-autoplay="true" data-vbtype="video" href="http://vimeo.com/xxx">Vimeo</a>
<a class="my-video-links" data-autoplay="true" data-vbtype="video" href="http://youtu.be/xxx">Youtube</a>
<a class="my-video-links" data-autoplay="true" data-vbtype="video" data-ratio="1x1" data-maxwidth="400px" href="my-video.mp4">MP4</a>
new VenoBox({
    selector: '.my-video-links',
});

Custom links

<a class="my-custom-links" data-vbtype="iframe" href="https://www.google.com/maps/embed?...">Gmaps</a>
<a class="my-custom-links" data-vbtype="iframe" href="http://example.com/">iFrame</a>   
<a class="my-custom-links" data-vbtype="ajax" data-maxwidth="800px" href="ajax.php">Ajax</a>
<a class="my-custom-links" data-vbtype="inline" data-maxwidth="400px" href="#inline-content">Inline</a>

<div id="inline-content" style="display:none;">
    <h1>Hello world!</h1>
</div>
new VenoBox({
    selector: '.my-custom-links',
});

Usage

Include venobox.min.css into the HTML <head>

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

Include venobox.min.js into the footer, after the jQuery library

<script type="text/javascript" src="venobox/venobox.min.js"></script>

Insert one or more links with their custom class

<a class="my-link" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
<a class="my-link" data-vbtype="iframe" href="http://example.com/">open iFrame</a>

Initialize plugin

Minimal setup

The default selector is ".venobox".
Adding the class venobox to the links, the plugin can be initialized with zero configuration

new VenoBox();

Custom selector

Initialize all elements containing the class my-link

new VenoBox({
    selector: ".my-link"
});

Still want to use jQuery? It’s possible!

VenoBox 2 is designed to be used without jQuery, but it’s still possible to use it with jQuery. If VenoBox detects jQuery in the window object it’ll add venobox() in jQuery’s plugin system; this means you’ll be able to do $('.venobox').venobox() to enable it.


Options

Option Description Default
selector Items selector '.venobox'
autoplay Automatic play for videos false
bgcolor Background color of the item (also affects border color, if has a border) '#ffffff'
border Border thickness of the modal window '0px'
infinigall Infinite gallery, jumps from last to first item and vice versa false
maxWidth Custom max window width, can be overridden by single items with data-maxwidth=""
Accepts any standard css length unit
'1200px'
navigation Show navigation arrows true
navSpeed Gallery transition speed (milliseconds) 300
numeration Show navigation number and total items in current gallery false
overlayClose Set false to disable the overlay click-close and keep enabled only the [×] close button true
overlayColor Backdrop color 'rgba(255,255,255,0.85)'
popup Show automatic popup on page load. (e.g. "#my-link") false
ratio Aspect ratio applied to iframes and videos
Available: '1x1' | '4x3' | '16x9' | '21x9'
'16x9'
share Sharing buttons for images and videos.
Available: ['facebook', 'twitter', 'linkedin', 'pinterest', 'email', 'download']
[]
shareStyle Sharing buttons style.
available: 'block' | 'pill' | 'transparent' | 'bar'
'bar'
spinColor Preloader color '#d2d2d2'
spinner Preloader type
Available: 'plane' | 'chase' | 'bounce' | 'wave' | 'pulse' | 'flow' | 'swing' | 'circle' | 'circle-fade' | 'grid' | 'fold | 'wander'
'bounce'
titleattr Specific attribute to display a title (e.g. 'data-title') 'title'
titlePosition Title position, available: 'top' or 'bottom' 'top'
titleStyle Title style.
Available: 'block' | 'pill' | 'transparent' | 'bar'
'top'
toolsBackground UI background color (Title and Share buttons) '#1C1C1C'
toolsColor UI color (Title, Share buttons and gallery navigation) '#d2d2d2'

Available spinners:

plane

bounce

wave

pulse

flow

swing

circle

circle-fade

grid

fold

wander

Spinners from SpinKit


Data Attributes

Content type

If the content is not an image you must specify its type via data attribute data-vbtype

Available values: iframe inline ajax video

<a class="venobox" data-vbtype="iframe" href="http://www.example.com">Open Iframe</a>
<a class="venobox" data-vbtype="inline" title="My Description" href="#inline">Open inline content</a>
<a class="venobox" data-vbtype="ajax" href="ajax-call.php">Retrieve data via Ajax</a>
<a class="venobox" data-vbtype="video" href="https://youtu.be/xxxxxx">YouYbe</a>

For Google Maps use the iFrame href attribute of map's embed code and set data-vbtype="iframe"

For videos use the simple url of the video

For inline contents set a hidden element with custom id and call it from your link href

Max width

data-maxwidth Overrides the global option maxWidth: '1200px'

Accepts any standard css length unit

<a class="venobox" data-maxwidth="600px" title="My Description" href="image-big.jpg">Open image</a>

To activate navigation between every type of content assign the same data attribute data-gall to each link.

<a class="venobox" data-gall="myGallery" href="image01-big.jpg"><img src="image01-small.jpg" /></a>
<a class="venobox" data-gall="myGallery" href="image02-big.jpg"><img src="image02-small.jpg" /></a>
<a class="venobox" data-gall="myGallery" href="image03-big.jpg"><img src="image03-small.jpg" /></a>

Use data-href="..." to override the default href="..."

<a class="venobox" href="#" data-href="//venobox-destination"
<button class="venobox" data-href="//venobox-destination">Click Me</button>

Title

Optional: set title attribute to show a description

<a class="venobox" title="Here your description" href="...

or use a custom data attribute, setting a titleattr option inside the plugin initialization

new VenoBox({
    titleattr: 'data-title'
});
<a class="venobox" data-title="Here your description" href="...

Autoplay videos

Use data-autoplay="true" to automatically start videos

<a class="venobox" data-autoplay="true" data-vbtype="video" href="...

or set the autoplay option true inside the plugin initialization to start all the videos

Aspect ratio

iFrames and Videos can have custom aspect ratio

Available values: 1x1 4x3 16x9 21x9
default: 16x9

<a class="venobox" data-ratio="16x9" data-vbtype="iframe" href="http://www.example.com">Open Iframe</a>
<a class="venobox" data-ratio="4x3" data-vbtype="video" href="my-video.mp4">Video</a>

Backdrop color

Examples

Color 1 Color 2 Color 3 Color 4

Just add a data-overlay value to your links for dynamic backgrounds.

<a class="venobox" data-overlay="rgba(95,164,255,0.8)" href="...">...</a>
<a class="venobox" data-overlay="#ca294b" href="...">...</a>

Note: don't use this for a static custom background. Simply set the option overlayColor.


Methods

call open, close, next or prev item outside the plugin

// Initialize venobox as a variable
var venobox = new VenoBox();

venobox.open('#my-link'); // Open specific item
venobox.close();          // Close the modal window
venobox.next();           // Navigate the next gallery item
venobox.prev();           // Navigate the previous gallery item
venobox.destroy();        // Destroy the plugin


Callbacks

var vboxOptions = {

    selector: '.my-link',

    // is called after plugin initialization.
    onInit: function(plugin){
        console.log('INIT');
        console.log(plugin);
    },

    // is called before the venobox pops up, return false to prevent opening;
    onPreOpen: function(obj){
       console.log('PRE OPEN');
       console.log(obj);
    },

    // is called when opening is finished
    onPostOpen: function(obj, gallIndex, thenext, theprev){
        console.log('POST OPEN');
        console.log('current gallery index: ' + gallIndex);
        console.log(thenext);
        console.log(theprev);
    },

    // is called before closing, return false to prevent closing
    onPreClose: function(obj, gallIndex, thenext, theprev){
        console.log('PRE CLOSE');
        console.log('current gallery index: ' + gallIndex);
        console.log(thenext);
        console.log(theprev);
    },

    // is called after gallery navigation step
    onNavComplete: function(obj, gallIndex, thenext, theprev){
        console.log('POST NAV');
        console.log('current gallery index: ' + gallIndex);
        console.log(thenext);
        console.log(theprev);
    },

    // is called after new content loaded
    onContentLoaded: function(newcontent){
        console.log('NEW CONTENT');
        console.log(newcontent);
    },
}
new VenoBox(vboxOptions);
Download

Looking for VenoBox WordPress plugin?

Get it here