Why do you need a WordPress gallery plugin? The simple answer is to help you make an 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 a lightbox popup can also make 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. Having responsive lightbox popups has become increasingly important nowadays, as most of the world’s online activity has moved to the mobile sphere, and it doesn’t look like that is going to change anytime soon.
Tips for Choosing the Right Plugin
Many free lightbox plugin developers promise immense value without really delivering on that promise. After all, what are their disappointed customers going to do? They can’t demand a refund, and even if they remove it from their website, the download count will stay the same. Even negative reviews can be dealt with by positive review bombing to keep the score up. This is why it’s particularly important to use plugins from trusted, proven developers. Unfortunately, this means that in order to access most of their functions, you might have to pay a small fee, but you’ll soon find that it’s worth it, especially considering that the alternative means dealing with poorly designed, broken plugins. Besides, most of the premium options do have a free version, which may be limited, but it gets the job done to a certain extent.
Using plugins such as FooBox for implementing lightbox popups to your website is one of the best ways of doing so. It can save you a lot of precious time and effort, and, as a bonus, improve your site’s optimization, which can go a long way in securing more regular visitors. When looking for the right plugin, it is important to make sure that it’s got everything you need to set up the lightbox popups correctly. Poorly implemented lightbox functions can be worse for the user experience than not having them at all!
Creating a WordPress Gallery With Lightbox Popup
So now that you know why we’re using a WordPress gallery with a 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 that you can share the image on several social networks once the lightbox is open. This feature is included in FooBox Pro and uses deep linking 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.
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 Show A 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 now has its 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 don’t need to worry about changing the settings or configurations. But for your reference, it’s important 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.
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.
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 a 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.
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.
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 editor.
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 to your clipboard. Then go to your page, and paste.
Why Are Lightbox Popups a Big Deal?
Once you create a lightbox popup function and implement it on your website, you will soon notice a difference in the way your customers interact with the site, not to mention the increase in traffic you’re going to witness. There are a few reasons behind that, but the most important one is improved user experience.
User Experience: Key to Success
People don’t really like or want to interact with difficult content. If a visitor goes to your website and finds the design particularly ugly, or doesn’t really like the fonts you’ve used, they may look past that. However, if your content, pictures, in particular, take a long time to load, pop up in a new tab, or don’t really display correctly on mobile devices, you can be almost certain that they will never return to your website again, regardless of how good your products or their photos may be. The purpose of any commercial website is to increase the value of showcased products or services by making a good first impression so that the next time someone opens it up in their browser, it will be with the intention to buy. Lightbox popups are one of the easiest ways to increase that value and make your website appear more user-friendly. With FooBox, you can even do it for free!
Nearly Everybody Uses Them
Even without the user factor, most modern sites tend to implement some sort of a lightbox popup in their design. It should come as no surprise. After all, they make navigation around the website easier, seem to be a hit with the visitors, and, if they are responsive, they can be flawlessly implemented across devices, regardless of the screen size. In order for people to notice the content on your site, you need to take action to exceed your competitors, or at least match their efforts. Without that, your site might not achieve the level of success you’d want it to. One of the best ways to start is to create a lightbox popup and make it part of your site design.
It Helps Optimize Your Site
Search engine optimization, or SEO, is a fundamental part of web design and development. A poorly optimized site will not get as many visitors as it could, simply because it will not show up on the first page of Google results for certain keywords. As webmasters and business owners began ramping up their efforts to make their websites more “searchable”, so have the Google algorithms become more adept at separating SEO for SEO’s sake and genuine attempts at making a website more accessible. One of the most important factors when it comes to that is a site’s functionality on mobile devices. Implementing responsive lightbox popups can go a long way in improving that, as it adjusts the zoom for mobile display while still allowing visitors to view your content in more detail without having to redirect to another page.
You’ve now created and used a WordPress gallery with a 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 site’s load times. Plus your users don’t have to navigate away from the page. The added advantage of social sharing, deep-linking, and other pro features like video, means 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.