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

Vimeo YouTube .mp4

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

Gmaps iFrame Ajax Inline

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'`
initialScale	Initial items transform scale	`0.9`
transitionSpeed	Transition speed for incoming items (ms)	`200`

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>

Gallery

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>

Href

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

@nicolafranchini Star Fork Watch

VenoBox 2