How to Create a WordPress Gallery With Lightbox Popup

Why do you need a WordPress gallery plugin? The simple answer is to help you make impact with your images. You can make an even bigger impression on your audience by adding in a lightbox popup function. Of course, there’s much more to it. A WordPress gallery with lightbox popup not only makes a stunning visual impact, it also makes it easier for your users to view and appreciate your images or videos.

Plus, it’s really easy to set up! But before we talk about how to do this, let’s have a quick look at why you should be using a WordPress gallery plugin, and why it’s a good idea to use a lightbox with this.

Why You Should Use WordPress Gallery Plugin

A WordPress gallery plugin is more efficient than the gallery that comes standard with WordPress. We’ve covered this before in more detail, but just to recap quickly, a plugin like FooGallery Free (or Pro) gives you far more flexibility when it comes to customizing your gallery and adding the features you need.

With a gallery plugin, you can create unique and beautiful photo galleries, which can be used to showcase your products or services, as part of your content marketing strategy, or simply to add visual aids to your blog. The possibilities are many and varied.

There are other benefits as well. As most gallery plugins use thumbnails, instead of loading the full-size image, you’re cutting down on page load times. Of course, your full-size images will load when someone clicks on the thumbnails, so they should still be optimized. FooGallery also uses Lazy Loading to further improve page speed.

You don’t have to start with a paid plugin either – FooGallery Free, for example, gives you plenty of customization options. You can use different gallery templates, customize your hover effects and add captions and descriptions. The advantage of using a premium WordPress gallery, like FooGallery Pro, is that you get a lot more features and options. You can add video, for example, which is useful for boosting traffic and social shares, or you can add advanced paging, hover presets, and so on.

Adding Lightbox Popup

Adding a gallery to your page is a great way to get someone’s attention. But most galleries work by displaying thumbnail images. What if someone wants to see the full-size image? More particularly, what if they want to see the full-size image without having to navigate away from your page? This is why you need a WordPress lightbox plugin.

A lightbox is a box or frame that pops up on top of the page you’re currently viewing. In the case of a gallery, it will open a larger or full-size version of the thumbnail image from the gallery. Users can then scroll through the images and, if the lightbox or gallery allows, even share specific images on social media. Then, when they’re done, they simply close the lightbox, returning them to the page they were on.

A lightbox is also a great way to view videos. Users can click on the video in the gallery, opening it in a bigger lightbox popup, from which they can view the video. Again, they don’t have to navigate away from your page and they can potentially share the video on social channels.

Another big advantage of using a plugin like FooBox, is that it is responsive. In other words, the frame adjusts automatically to the size of the screen on which it is being viewed. If you’re looking at the images on a phone or tablet, then, the lightbox adjusts to accommodate this. This is a huge plus for ensuring your site is mobile-friendly.

Creating a WordPress Gallery With Lightbox Popup

So now that you know why we’re using a WordPress gallery with lightbox popup, let’s take a look at how this works and how you can create this on your own WordPress site.

Here’s a gallery we created using FooGallery Pro, with FooBox Pro as our lightbox. To see how it works with the lightbox popup, just click on one of the images. It will open in a frame above the page, and from here you can scroll through the other images. To close the lightbox, you can either click on the ‘X’ in the top right corner, or just click on the screen behind the lightbox.

You’ll notice, once the lightbox is open, that you can share the image on several social networks. This feature is included in FooBox Pro, and uses deeplinking to share not just the page or the gallery, but a specific image.

You will also see the caption appear at the bottom of the image – with FooGallery you can choose whether captions, titles, descriptions or alt text are used here. Users can select to close the caption bar if they wish. Other useful features include the navigation arrows on the sides of the image and the image counter below the lightbox.

Use FooBox for Lightbox popup

While we have used FooGallery Pro and FooBox Pro for this gallery, you would be able to do most of this with the free versions. FooBox free might not include social sharing and the styling is slightly different, but you still get the popup effect with captions and navigation. So let’s take a look at how to create this for yourself.

How To Get Lightbox Popup

The first thing you’ll need to do is install and activate a WordPress lightbox plugin. We’ll go through the steps, using FooBox Free as an example. [On a side note: FooGallery Pro will soon have it’s own lightbox built-in, saving you the need to install FooBox free. But if you’re using FooBox Pro, you can find out how to install it in this article.]

To install your lightbox plugin, go to Plugins –> Add New and search for FooBox. It should be the first result you see. Click on Install Now, followed by Activate. FooBox will now start working automatically on your site.

FooBox works out of the box, so you shouldn’t need to worry about changing the settings or configurations. But for your reference, you need to ensure that FooBox is enabled. To check this, go to your FooBox settings. Here you’ll be asked what you want to attach FooBox to – all of the boxes should be ticked. This will allow you to open galleries, images and more in your lightbox. By way of example, if you click on any image on this page, they will open in FooBox.

Enable FooBox for all attachments

FooBox is included by default on all pages. If, for some reason, you have selected to exclude FooBox assets from being used automatically, then you can still enable FooBox on individual pages. To do this, click on the page’s Document settings and scroll to the bottom. You will see the option to Include FooBox on the page – tick this.

Select to include FooBox assets on specific pages

Creating your Gallery

Once your lightbox is set up, you can go ahead and create your gallery. We’ll show you how to do this using FooGallery, with a quick look at the settings you need for the lightbox popup.

Obviously the first step is installing FooGallery. You can install FooGallery Free from your plugins page, or purchase FooGallery PRO and install the download. Once installed, you shouldn’t need to make any changes to the general settings – everything is designed to work out of the box. All you need to do to get started is Add a Gallery.

You’ll then add a title and choose your images. You can upload images or use those already in your Media Library. If you’re using FooGallery Pro, you can also add video or pull in images from other sources. Once you have your images, you can get started on the fun part – designing your gallery!

First, choose your gallery template. This will determine the basic structure of your gallery. Here we’ve gone for a Justified Gallery. If you want to see what your gallery will look like, there’s no need to open it on a separate page – just toggle over to the Gallery Preview above the settings.

WordPress gallery with lightbox popup

Adding A Lightbox Popup To Your Gallery

You’ll see different settings under the General tab, depending on which template you’ve selected. Most, however, will include settings for the Thumbnail Link and the Lightbox. The exceptions here will be the Slider Pro and Grid Pro galleries, which don’t open images in a lightbox.

The Thumbnail Link settings should, by default, be set to open the Full Size Image in the lightbox. You also then need to select the lightbox you want to use. If FooBox is installed, this field should automatically be set to FooBox.

Select Thumbnail link and set lightbox to FooBox for popup function

Once you have checked that these settings are set, you can go ahead and style your gallery. You will be able to adjust the margins, border shading, hover effects, and so on. When you’re happy with your gallery, just hit publish.

Using Your Gallery

Congratulations! You have created a WordPress gallery with lightbox popup functionality. Now you can use your gallery on one of your pages or in a blog post.

If you’re using the Gutenberg block editor, you can add your gallery by selecting the FooGallery block – found under Common Blocks. You’ll then be able to select the gallery you want to use from all of your current galleries. Once selected, you’ll see a preview of your gallery in the page editor.

Select FooGallery block from menu

If you’re using the classic editor, you can make use of the gallery shortcode to add your gallery to your page. The shortcode can be found on the right hand side of your gallery editor. Simply click on the shortcode to add it your clipboard. Then go to your page, and paste.

Final Thoughts

You’ve now created and used a WordPress gallery with lightbox popup using FooGallery and FooBox. It really is quite simple and a lot of fun creating and styling your galleries. You can, of course, always go back and edit the galleries – just make sure to retain your lightbox settings.

Using a gallery with the lightbox ensures that you can create a visual impact, while still giving users the chance to view the full-size images. This helps to improve your page load times. Plus your users don’t have to navigate away from the page. The added advantage of social sharing, deeplinking and other pro features like video, mean that you can take your galleries to the next level with the premium plugins.

Regardless of whether you use the free or premium plugins, you should definitely be adding a popup lightbox function to your WordPress galleries.

2 thoughts on “How to Create a WordPress Gallery With Lightbox Popup”

  1. I’ve been a big fan of Foo Gallery and the Lightbox for several years now, but would really love to be able to use the lightbox with the slider pro gallery because 1) we’re wanting to use it in a smaller, not full-screen space, and 2) it crops the images so it would be nice to be able to show users the full, non-cropped image. Will lightbox be included as an option with the slider pro gallery any time soon?

    • We are working on something that could work as a solution for you. It’s not quite ready for release, but should be in the next few weeks. You can keep an eye on our social channels or on our blog for more updates.

Leave a Comment

How to Create a WordPress Gallery With Lightbox Popup