Fork me on GitHub


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

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


Image gallery (possibility of navigation with keyboard arrows)

pictures by: Basik, TomoZ, Burla2222

Various links

iFrame Gmaps Vimeo YouTube Ajax Inline


Include VenoBox css and javascript after jQuery library

<!-- Add jQuery library -->
<script type="text/javascript" src=""></script>

<!-- Add venobox -->
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>

Insert one or more links with its custom class

<a class="venobox" href="image01-big.jpg"><img src="image01-small.jpg" alt="image alt"/></a>
<a class="venobox_custom" data-type="iframe" href="">open iFrame</a>

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

For videos use the simple url of the video, such as:, or

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

Initialize plugin


    /* default settings */

    /* custom settings */
        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

    /* auto-open #firstlink on page load */

Data Attributes

If the content is not an image you have to specify its type via data attribute data-type

Available values: iframe inline ajax youtube vimeo

<a class="venobox" data-type="iframe" href="">Open Iframe</a>
<a class="venobox" data-type="inline" title="My Description" href="#inline">Open inline content</a>
<a class="venobox" data-type="ajax" href="ajax-call.php">Retrieve data via Ajax</a>
<a class="venobox" data-type="youtube" href="">YouYbe</a>
<a class="venobox" data-type="vimeo" data-autoplay="true" href="">Vimeo</a>

Optional: set title attribute to show a description

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

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

<a class="venobox" data-autoplay="true" data-type="vimeo" href="...
<a class="venobox" data-autoplay="true" data-type="youtube" href="...

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

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


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>


Customize the popup window via JavaScript

infinigall: infinite gallery, jumps from last to first item and vice versa - default: false

numeratio: show navigation number and total items in current gallery - default: false

border: border thickness of the popup window in pixel - default: '0px'

bgcolor: background color of popup window (also affects border color, if has a border) - default: '#ffffff'

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

titleattr: specific attribute to display a title (e.g. 'data-title') - default: 'title'

New: custom overlay colors

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 modify default .vbox-overlay inside venobox.css)


Download VenoBox 1.6