4 Demos of jQuery lightbox plug-in for images, inline content and videos

The jQuery lightbox plug-in

The VenoBox is a jQuery based plug-in for creating the responsive modal windows for various type of content. You may use it for presenting the images, Google maps, inline content and videos from different sources like YouTube and Vimeo.

The lightbox is fully responsive, so adjusts to the user’s screen nicely.

Demo1 Demo2 Demo3
Developer page Download plug-in

Install and setup the jQuery lightbox plug-in

You may install this nice lightbox plug-in by using bower, npm, composer or yarn as follows:

Via Bower:

bower install venobox

Via npm:

npm install venobox

By composer:

composer require nicolafranchini/venobox

By yarn:

yarn add venobox

Alternatively, you may use the old-fashioned way i.e. download the plug-in from above link and get the venobox.min.js or development version venobox.js. Place that file after the jQuery reference:

<script src=”https://code.jquery.com/jquery-3.1.1.min.js”></script>

<script src=”js/jquery-VenoBox/venobox.min.js”></script>

You also need to place the CSS file that comes up with the downloaded file in the <head> section:

<link rel=”stylesheet” href=”css/jquery-VenoBox/venobox.css” />

The Markup:

For creating the images lightbox, the markup can be like this:

 

Initiate the plug-in via JavaScript:

 

See the demos below for different types of lightbox with complete code.

A demo of lightbox with images

You have to place the large image in the <a> tag that will be displayed on the modal window. The smaller image or thumbnail is placed by using the <img> tag. For the demo, four images are used. Click on any for displaying the lightbox where you may see the arrows to navigate the other items.

jQuery lightbox

See online demo and code

The markup:

 

The script for initializing the plug-in:

A demo with custom options

In the following demo, the same set of images is used for the lightbox. In the above demo, the lightbox was initiated with the default settings. For this demo, the custom values are used for a few options from a number of available options. These options include:

  • spinner: ‘cube-grid’ ‘’ //Display spinner as the gallery image is loading
  • spinColor: ‘#FFAA55’ //Color of the spinner
  • arrowsColor: ‘#8E400C’ //Arrows color towards left and right for navigating images
  • framewidth: ‘650px’
  • frameheight: ‘460px’

and a few others. Have a look at the output of this lightbox with custom options:

jQuery lightbox custom options

See online demo and code

The script:

 

The plug-in has a few other options that you may learn by visiting the developer page.

A demo of running videos in lightbox

For running the videos in the lightbox, use the data-vbtype=”video” attribute with optionally data-autoplay=”true”. The data-autoplay=”true” will autoplay the video. Provide the URL of the video in the href part of the <a> tag as shown in the demo below:

jQuery lightbox video

See online demo and code

The markup:

 

The plug-in is initiated with the default setting via JavaScript:

 

A Demo of using Google maps

Just provide the embed URL of Google map in the href part of the <a> tag. Also, use the data-vbtype=”iframe” attribute as the map will open in an iframe. Have a look with custom options:

jQuery lightbox Google Maps

See online demo and code

The markup:

 

The script:

 

Similarly, you may create the lightbox with inline content and AJAX call as using this awesome plug-in.