A Beginner’s Guide to using a WordPress Lightbox Plugin
What is a lightbox? If you thought it had something to do with taking photos, well, you wouldn’t be wrong. But in the world of WordPress, a lightbox is something quite different. So we’re going to walk you through the basics of using a WordPress Lightbox plugin on your website. We’ll cover exactly what a lightbox is, why you should be using a lightbox plugin and how to go about doing this.
What is a WordPress Lightbox Plugin?
To get started, let’s first establish what a lightbox is when it comes to WordPress. When you click on an image, button or link, and it opens in a box or panel above your website, it’s opening in a lightbox. This is essentially a panel that appears as an overlay on the page you are currently viewing, usually causing the underlying website to lose focus, or appear darker.
Here’s a quick example, showing you how a thumbnail on your page can open in a lightbox, to display the fullsize image.
The lightbox ensures that users on your website don’t click away from the page. Instead, it allows them to complete an action (like view an image or fill out a form) before returning them to the page they were on. This makes it easy for them to continue where they left off.
If you’re using WordPress for your site, then you will need to install a plugin to give you this capability. FooBox, for example, is a WordPress lightbox plugin that allows you to open images, forms, iFrames and html content in a lightbox. All you need to do is install FooBox from your plugins page in WordPress (for the free version) to start using this plugin.
Why Use a WordPress Lightbox Plugin?
There are plenty of benefits to using a lightbox on your WordPress website. For one, images aren’t opened in a separate window or tab in your browser. A lightbox makes it easy to customize how your images are displayed. It means you don’t have to dramatically downscale images. Plus, it helps ensure your images are responsive. Let’s look at these benefits in a bit more detail.
If you’re displaying images on your site, you don’t want visitors to navigate away from your page every time they want to open a full-size photo. Without a lightbox, this is exactly what would happen. Someone would click on an image, only to have it open in a new tab or window. To get back to your website, they would need to click back. Many users just wouldn’t bother.
A lightbox opens the full-size image above the site content, ensuring your visitors don’t leave the page. It’s easy for them to then close the lightbox to continue from where they left off.
Speaking of easy navigation, a lightbox like FooBox includes navigational arrows when used for viewing an image gallery. Visitors can scroll through the gallery items, without having to open images individually. (Which would probably also mean opening individual tabs, and cluttering up your browser.)
Instead of styling individual images every time you use one in a blog post or on a page, a lightbox can be quickly and easily customized. FooBox Pro, for example, comes with over 85 customizations, allowing you to create a unique lightbox style for your website. You can change the theme, color and animations; adjust how the captions display; enable slideshows; and much more.
Once styled, your lightbox will use the same settings across your site. This saves you from styling the lightbox every time you use an image, and creates uniformity across your site.
Full Size Images
Another great benefit of using a WordPress lightbox plugin is that you don’t have to dramatically downscale your images. Of course, we recommend optimizing your images for the web. Plus, you still need to consider the amount of space you have available for your website and you don’t want huge images in your media library. Large media files will also impact on your thumbnail size and page load times.
But you can still have great quality full-size images when using a lightbox. How? Well, you’re not adding your images directly to your page. You’re only adding image thumbnails. A lightbox works by opening the full size image (when the thumb is clicked on) in a separate URL. So your initial page load time isn’t impacted when using bigger images.
Many WordPress lightboxes will offer a responsive design. This means that your lightbox will adjust automatically to the size of the screen on which it is being viewed. So if someone is using a smartphone to view images on your site, they will be able to see the whole image on their screen. They won’t need to scroll, or move the image, to see all of it.
Here’s a quick look at what we mean. In the image below, you can see how the lightbox adjusts to the screen on which it is being viewed.
Why does this matter? People are increasingly using mobile devices to browse the internet. If your site isn’t mobile-friendly, then visitors using mobile devices aren’t likely to stay on your website. Google and other search engines also consider this when ranking your website. One way to ensure your site is mobile-friendly, is to use a responsive lightbox.
Depending on the lightbox you are using, there may be additional benefits. For instance, FooBox Pro allows you to sell photos online, using it’s integration with Fotomoto. You can also get analytics tracking, deeplinking, social sharing, and more. We discuss some of these in more detail a bit later.
When Should I Use a Lightbox?
A WordPress Lightbox is quite versatile. It’s often used to open images, either for photos on a blog post, or for photo galleries. While this is one of the more common uses for a lightbox, it is certainly not the only one.
You can use a lightbox to open forms, a Contact Us page, or a survey, just to give you a few examples. This can be useful when you don’t want someone to leave the page, but you do want them to complete an action.
You can also open a variety of items in a lightbox using html. This functionality allows you to hyperlink text or a button on your page to open a lightbox, displaying the content of your choice. In other words, you can link a phrase, like ‘Fill in the Questionnaire’, to a form that opens in a lightbox. Users can then complete and submit the form, close the lightbox, and return to the original page.
So you can (and should) use a lightbox whenever you need to keep visitors on your page, or when you don’t want them to have to navigate away from a page.
What To Consider When Choosing A WordPress Lightbox Plugin
Make sure it is responsive. This will help your SEO, and ensure your site is mobile-friendly. Another useful feature, particularly for galleries, is being able to swipe on mobile. For instance, FooBox Pro lets you swipe through images in the gallery when on mobile, eliminating the need to locate or use potentially small navigation arrows.
Deeplinking allows you to share the lightbox URL, rather than just the page URL. In other words, if someone opens a form in a lightbox, deeplinking will allow you to share the form’s URL. This is also quite handy when it comes to sharing a single image in a gallery, or any item that may otherwise be difficult to locate on the page. So this is definitely something worth considering when choosing a lightbox.
Social Sharing is another important feature. Having a lightbox that allows for social sharing can help boost traffic and social shares for your website.
A WordPress lightbox plugin is both useful and beneficial. This is particularly true if you’re using images or galleries on your website. But it’s a great addition to any WordPress site.
There are plenty of free lightbox plugins available, and using one of these will give you a good idea of how a lightbox works and it’s benefits. If you find that you need more advanced features, then you can look into a premium lightbox for your WordPress site.