Simple lightbox gallery for WordPress (with blocks) in 2 minutes

If you are looking for a nice and simple lightbox implementation, you should really give simplebox.js a try.

The actual result:

• 

• 

• 

• 

Neat, right? No plugin, minimal maintenance (and overhead) – it just works, what else can you ask for?

How it’s done

First download the simplebox.js files and upload them to your child theme (you are using a child theme, right?) then perform these simple changes to your theme files.

functions.php

Use the wp_enqueue_scripts hook to add the simplebox.js files to your theme:

/**
 * Enqueue simplebox (lightbox) style and script
 * @return void
 */
function child_enqueue() {
    wp_enqueue_style('simplebox-min', get_stylesheet_directory_uri() . '/css/simplebox.min.css');
    wp_enqueue_script('simplebox-min', get_stylesheet_directory_uri() . '/js/simplebox.min.js', [ 'jquery' ]);
    wp_enqueue_script('script-js', get_stylesheet_directory_uri() . '/js/script.js', [ 'jquery' ]);
}
add_action('wp_enqueue_scripts', 'child_enqueue', 10);

Now all you have to do is to create the script.js file and modify your child theme style.css file.

script.js

jQuery(document).ready(function($) {
    $('ul.wp-block-gallery > li.blocks-gallery-item > figure > img').addClass('wp-image-zoom').simplebox();
});

Note: 
You can skip the script.js file if you already have a file with some custom JavaScript. Then just copy the code inside the ready callback function and remove wp_enqueue_script for the script.js file.

style.css

div#overlay {
    z-index: 9999;
}

img.wp-image-zoom {
    cursor: zoom-in;
}

Now insert a “Gallery” in WordPress with the new Gutenberg editor, publish, enjoy.