How to add a lightbox effect to your images

Here is an easy way to add a LightBox effect to your images.

Glightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for youtube, vimeo and even self hosted videos with JWPlayer support.

Step 1

Go to this page to download the zip file: https://github.com/biati-digital/glightbox
Then upload and enqueue the CSS and JS files :

wp_enqueue_style( 'glightbox-css', plugin_dir_url( __FILE__ ) . 'assets/css/glightbox.min.css' );

wp_enqueue_script( 'glightbox-js', plugin_dir_url( __FILE__ ) . 'assets/js/glightbox.min.js', '','', true );

[ see HOWTO to learn how to add custom files ]

Step 2

In a Code Block, add this Javascript code :

var lightboxDescription = GLightbox({
  selector: '.glightboxTest'
});

Step 3

Add your image, then wrap it with a Link Wrapper . The URL of the link must also be an image.

Step 4

Add the class glightboxTest to the Link Wrapper :

That's it, it's already working :)

Don't forget to check the page for more options, like the opening animation and so on: https://github.com/biati-digital/glightbox

Example :

var lightboxDescription = GLightbox({
  selector: '.glightboxTest',
  openEffect: 'fade',
  closeEffect: 'none'
});

Note

Even if you can use the same image in the lightbox, it's better to display a small resolution first, then open the lightbox with the full size version.

In Wordpress, each time we upload an image, several versions are generated automatically (different sizes). The best way to see all the versions of each image, it's to install this plugin : https://wordpress.org/plugins/display-all-image-sizes/

Now we can see the real link for each size :

For example, at the top of this page, for the 3 images, I chose the medium size version of each image, and the full size for the link :

Also note that because they all have the same class, they belong to the same "gallery", which means you can display the other images by clicking on the arrows :