Popup Lightbox content using VenoBox.js

This tutorial provides the steps to create a popup Lightbox using VenoBox.js

VenoBox 2 works without jQuery, but it is also possible to use it with jQuery. You can find all the details on the VenoBox website.

Let’s start.

Prerequisite:

None.

STEP 1

Download VenoBox script from Github and extract and move the css and js  file to the site folder. The path will be similar in your theme or plugin depending on how you want to enqueue the file.

/js/venobox.min.css
/css/venobox.min.js

STEP 2

Enqueue all the files using the following code:

for HTML

<link rel="stylesheet" id="venobox-css" href="css/venobox.min.css" type="text/css" media="all" />
<script type='text/javascript' src='js/venobox.min.js' id='venobox-js'></script>

For Plugin

//* Load custom styles and scripts
add_action( 'wp_enqueue_scripts', 'load_custom_styles_scripts' );
function load_custom_styles_scripts() {
   // venobox.min.css
   wp_enqueue_style( 'venobox-style', plugin_dir_url( __FILE__ ) . '/css/venobox.min.css' );
  // venobox.min.js
  wp_enqueue_script( 'venobox-script', plugin_dir_url( __FILE__ ) . '/js/venobox.min.js', array('jquery'), '1.0.0', false );
  // init.js
  //wp_enqueue_script( 'init-script', plugin_dir_url( __FILE__ ) . '/js/init.js', array('jquery'), '1.0.0', true );
}

For Theme

//* Load custom styles and scripts
add_action( 'wp_enqueue_scripts', 'load_custom_styles_scripts' );
function load_custom_styles_scripts() {
   // venobox.min.css
   wp_enqueue_style( 'venobox-style', get_stylesheet_directory_uri() . '/css/venobox.min.css' );

    // venobox.min.js
    wp_enqueue_script( 'venobox-script', get_stylesheet_directory_uri() . '/js/venobox.min.js', array('jquery'), '1.0.0', false );

    // init.js
    //wp_enqueue_script( 'init-script', get_stylesheet_directory_uri() . '/js/init.js', array('jquery'), '1.0.0', true );
}

OR use a CDN for a quick test.

for HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/venobox@2.0.4/dist/venobox.min.css">
<script src="https://cdn.jsdelivr.net/npm/venobox@2.0.4/dist/venobox.min.js"></script>

for WordPress

//* Add external style and scripts.
add_action( 'wp_enqueue_scripts', 'external_style_script', 20 );
function external_style_script() {
 
  //* venobox-js
 wp_enqueue_style( 'venobox-css', 'https://cdn.jsdelivr.net/npm/venobox@2.0.4/dist/venobox.min.css' );
 wp_enqueue_script( 'venobox-js', 'https://cdn.jsdelivr.net/npm/venobox@2.0.4/dist/venobox.min.js', array(), '1.0.0', false );

}

STEP 3

The next step is what type of content you want to show in the popup. Here I am using HTML content. You can also use Video, Contact form, and more.

<a id="my-venobox-link" class="my-venobox-link" data-vbtype="inline" data-maxwidth="400px" href="#inline-content">Inline</a>

<div id="inline-content" style="display:none;">
  <h1>Hello world!</h1>
</div>

STEP 4

Initialize the venobox plugin using the following code. You can also use the class .venobox in HTML without using any selector in JS.

new VenoBox({
  selector: '.my-venobox-link',
});

You can init the script directly inline in HTML or can use the wp_footer function in WordPress.

//* init
add_action( 'wp_footer', 'init_script', 15 );
function init_script() {
?>
// paste your code here
<?php 
  
}

Make sure to close the code with <script> tag when used inline.

OR create a new init.js file under the /js/ folder and add the code excluding the <script> tag. Make sure HTML is matched according to the same.

Enqueue the file.

for HTML

<script type='text/javascript' src='js/init.js' id='init-js'></script>

for WordPress

Enqueue it using the code in STEP 2. Just add the extra line with the name and file path or delete the commented out // as per the code.

Customizations:

While there are multiple options available, I will list some of them in a new init code.

new VenoBox({
  selector: '.my-venobox-link',
  popup: '#my-venobox-link', // content to popup on page load
  spinner: 'grid',
});

and it’s done.