Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Load Your Gallery Lightbox from a Text Link

Have you ever wanted to have your Envira gallery lightbox open from a simple text link? With some custom code and CSS you can do this easily with Envira! This tutorial will walk you through the steps needed.

This tutorial is a bit more technical than our other docs, but we’ll walk you through the process step by step. In order have an Envira gallery lightbox open from a text link, we’ll need to create and upload a basic WordPress plugin.
  1. Creating the Plugin
  2. Activate the Plugin
  3. Setup

Create the Plugin

To open an Envira gallery lightbox from a text link, just add the following code to a new file at wp-content/plugins/envira-lightbox-from-text-link.php.

<?php
/**
* Plugin Name: Envira Gallery - Load Lighbox from Text Link
* Plugin URI: https://enviragallery.com
* Version: 1.0.0
* Author: Envira Gallery Team
* Author URI: https://enviragallery.com
* Description: Loads the Gallery's Lightbox from a text link
*/
/**
* Enable comments on Envira Galleries
*
* @since 1.0.0
*
*/

function envira_gallery_launch_lightbox( $data ) {
	?>

	<script>
		jQuery(document).ready(function() {
			jQuery('a.EnviraLink').on('click', function(e) {
				e.preventDefault();			
				jQuery('#envira-gallery-' + jQuery(this).data('envira-gallery-id') + ' a.envira-gallery-link:first').click();
			});
		});
	</script>
	<?php
}
add_filter( 'wp_footer', 'envira_gallery_launch_lightbox' );

Not sure how to do that? Just follow these steps:

  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 above into the file and save the file as envira-lightbox-from-text-link.php.
  3. Once you have 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 – Load Lighbox from Text Link plugin.

Activate the Envira Gallery - Load Lighbox from Text Link plugin

Setup

Now that our plugin is installed and activated, we’ve a few more steps before we can see it in action!

Our first step is to create a new page or post. For this example, we’ll be working with a new page. Click on Pages » Add New and give a title to your page.

Next, click on the Text Tab. We’ll need to use this tag so we can add some custom HTML for our gallery.

From the Text tab, make sure you click Add Gallery to insert your gallery

Once you have your gallery inserted, your page should look something like this:

your gallery is now the only thing on your page

We have a few more things to add here before we’re ready to move onto the next step.

Now we want to set up our text link. Use this code below to copy and paste under your gallery. You’ll need to change the 1447 number in the code to match what your gallery ID number is from your shortcode you’ve just added.

<a href="#" class="EnviraLink" data-envira-gallery-id="1447">Click me to open lightbox</a>

Finally, all we have to do now is wrap our shortcode into an HTML div that we can apply a class to so that it won’t display on the page.

The reason we do this is so that the gallery will load on the page which will allow the lightbox script to load as well, but we don’t want to show our gallery. So we’re going to hide it with CSS.

Wrap your shortcode in an HTML div called hide-envira-gallery.

<div class="hide-envira-gallery">--your shortcode goes here--</div>

Your final page should look like this:

complete page example

Publish your page and in the next and final step, we’ll add the CSS we need.

The final step is to now hide the gallery. Currently our page shows the full gallery as well as the text link.

here is our published page before we add our CSS

Let’s go to Appearance » Customize » Additional CSS and under the comments, copy and paste this CSS. Then click Save & Publish to save the changes.

.hide-envira-gallery {display:none;}

add your custom css to hide the class

This is the only time we’ll need to add this CSS. Any galleries we work on in the future will use the same CSS so we won’t need to do this step again.

After adding our CSS, we can see our page now looks exactly like we want it to as well as when we click the link, we can see all the gallery images in the lightbox using the settings from the gallery.

Completed page - gallery view

Completed page - lightbox view

Would you like to do some more fun stuff with Envira? Have a look at our tutorial on How to Style Pagination Links to appear like buttons.