VenoBox

Just another responsive jQuery Lightbox plugin, suitable for images, inline contents, iFrames, Google-Maps, Ajax requests, Vimeo and YouTube videos.

GitHub

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

Possibility of navigation with arrow keys

<a class="venobox" data-gall="gallery01" href="image01-big.jpg"><img src="image01-small.jpg"></a>
<a class="venobox" data-gall="gallery01" href="image02-big.jpg"><img src="image02-small.jpg"></a>
artworks by: Basik, TomoZ, Burla22, Mozone

Video

<a class="venobox" data-autoplay="true" data-vbtype="video" href="http://vimeo.com/xxx">Vimeo</a>
<a class="venobox" data-autoplay="true" data-vbtype="video" href="http://youtu.be/xxx">Youtube</a>

Custom links

Usage

Include venobox.css into the HTML <head>

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

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

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="venobox/venobox.min.js"></script>

Insert one or more links with their custom class

<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
<a class="venobox_custom" data-vbtype="iframe" href="http://example.com/">open iFrame</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, such as: http://www.vimeo.com/your_video_id, or http://www.youtu.be/your_video_id

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

Initialize plugin

Default settings

$(document).ready(function(){
    $('.venobox').venobox(); 
});

Auto-open #firstlink on page load

    $("#firstlink").venobox().trigger('click');

Custom settings

    $('.venobox_custom').venobox({
        framewidth: '400px',        // default: ''
        frameheight: '300px',       // default: ''
        border: '10px',             // default: '0'
        bgcolor: '#5dff5e',         // default: '#fff'
        titleattr: 'data-title',    // default: 'title'
        numeratio: true,            // default: false
        infinigall: true            // default: false
    });

Options

Option Description Default
arrowsColor Gallery navigation arrows color '#B6B6B6'
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'
closeBackground Close button background color '#161617'
closeColor Close button text color '#d2d2d2'
framewidth You can set a static window width, otherwise the plugin will keep the responsive size settings of .venoframe class ''
frameheight You can set a static window height, otherwise the plugin will keep the responsive size settings of .venoframe class ''
infinigall Infinite gallery, jumps from last to first item and vice versa false
numeratio Show navigation number and total items in current gallery false
numerationBackground Gallery numeration background color '#161617'
numerationColor Gallery numeration text color '#d2d2d2'
numerationPosition Gallery numeration position, available: 'top' or 'bottom' 'top'
overlayClose Set false to disable the overlay click-close and keep enabled only the [×] close button true
overlayColor Overlay background color 'rgba(255,255,255,0.85)'
titleattr Specific attribute to display a title (e.g. 'data-title') 'title'
titleBackground Title background color '#161617'
titleColor Title text color '#d2d2d2'
titlePosition Title position, available: 'top' or 'bottom' 'top'
spinColor Preloader color '#d2d2d2'
spinner Preloader type 'double-bounce'

Available spinners:

rotating-plane

double-bounce

wave

wandering-cubes

spinner-pulse

three-bounce

cube-grid

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.veno.es">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="http://youtu.be/d85gkOXeXG4">YouYbe</a>
<a class="venobox" data-vbtype="video" data-autoplay="true" href="http://vimeo.com/75976293">Vimeo</a>

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

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

Video

Use data-autoplay="true" to automatically start Vimeo and YouTube videos individually

<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

Link

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

<a class="venobox" href="#" data-href="//venobox-destination"

Gallery

To activate navigation between every type of content assign the same data attribute data-gall to each link, like the example below

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

Custom overlay colors

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>
you can also add a data-css value to append a custom class to .vbox-overlay

<a class="venobox" data-css="custom-overlay" href="...">...</a>

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

Methods

call close, next or previous item outside the plugin

    var test = $('.venobox').venobox();

    // close current item clicking on .closeme
    $(document).on('click', '.closeme', function(e){
        test.VBclose();
    });

    // go to next item in gallery clicking on .next
    $(document).on('click', '.next', function(e){
        test.VBnext();
    });

    // go to previous item in gallery clicking on .previous
    $(document).on('click', '.previous', function(e){
        test.VBprev();
    });

Callbacks

just use the line you need, and fill the body of the function

var venoOptions = {

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

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

    // is called when opening is finished
    cb_post_open  : 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
    cb_pre_close  : function(obj, gallIndex, thenext, theprev){
        console.log('PRE CLOSE');
        console.log('current gallery index: ' + gallIndex);
        console.log(thenext);
        console.log(theprev);
    },

    // is called after finished closing. 
    cb_post_close : function(){
        console.log('POST CLOSE');
    },

    // is called after a window resize.
    cb_post_resize: function(){
        console.log('POST RESIZE');
    },

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