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

CUSTOM CSSS

Image gallery

Touch Swipe and Arrow Keys navigation enabled

Code:
<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: true,
    spinner: 'rotating-plane'
});

Video

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

Code
<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

Code
<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 near the end of your pages, 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'
customClass Set an additional custom class to the main .vbox-overlay wrapper, can be overridden by single items with data-customclass=""
Accepts single class name without .dot
false
fitView Resize the images to fit within the viewport height, preventing vertical scroll, can be overridden by single items with data-fitview="true" false
focusItem Focus current item after popup close false
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
'100%'
navigation Show navigation arrows true
navKeyboard Enable navigation with keyboard keys true
navTouch Enable swipe touch / drag 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' | 'full'
'16x9'
share Sharing buttons for images and videos false
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

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, full
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.


Custom class

data-customclass overrides the global option customClass

<a class="venobox" data-customclass="my-custom-class" href="...">Open image</a>

Methods

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

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

venobox.close();          // Close the modal window
venobox.next();           // Navigate the next gallery item
venobox.prev();           // Navigate the previous gallery item

// Open specific item
var myLink = document.querySelector('#my-link');
venobox.open(myLink);


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