Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Add Image Counter to Gallery Lightbox

Would you like to add an image counter to your Envira gallery lightbox? This tutorial will help walk you through how to get your lightbox to display an image counter for you.

This tutorial is a bit more technical than our other docs, but we’ll walk you through the process step by step. In order to add an image counter to your gallery’s lightbox, we’ll need to create and upload a basic WordPress plugin.

Creating the Plugin

To add an image counter to your Envira gallery lightbox, just add the following code to a new file at wp-content/plugins/envira-lightbox-image-counter.php.

If you don’t want a line break, simply remove the <br /> tag from the code output and replace with something else (such as a dash).

<?php
/*
* Plugin Name: Envira Gallery - Lightbox Image Counter
* Plugin URI: https://enviragallery.com
* Version: 1.0.0
* Author: Envira Gallery Team
* Author URI: https://enviragallery.com
* Description: Adds an image counter to all Envira Galleries when viewing images in the lightbox
*/

add_action( 'envira_gallery_api_before_show', 'tgm_envira_gallery_image_count' );
function tgm_envira_gallery_image_count( $data ) {

    ob_start();
    ?>
    this.title = (this.title ? '' + this.title + '<br />' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
    <?php
    echo ob_get_clean();

}

If you’re unsure how to create a plugin file, follow these steps below:

  1. Open a text file and make sure that it is a plain text document. You can use a plain text editor like Notepad or a code editor of your choice.
  2. Next, copy and paste the code shown below that matches the page builder you’re using into the file and save the file as envira-lightbox-image-counter.php
  3. Once you’ve saved the file you can easily upload this directly to your /plugins directory on your server using FTP or you can right-click on the text document and zip (or compress).
  4. Finally, log in to your WordPress dashboard and go to Plugins » Add New » Upload Plugin and upload the .zip file you just created in the previous step.

Activate the Plugin

Your next step is to activate the plugin you just uploaded. Simply navigate to the Plugins from within your WordPress dashboard and activate the Envira Gallery – Lightbox Image Counter plugin.

And that’s it, you’re all done! Would you like to try some more cool things with Envira? Check out our tutorial on how to Change Image Crop Position on Envira Images!