Make Your WordPress Media Mobile-Friendly Using Responsive Lightbox Plugin

by Mustaasam Saleem  July 6, 2017

Either you run a blog, business or an online store, images on your site plays a vital role to make the content more engageable. A few years back, browsing the Internet via mobile devices has been increased as compared to desktop devices. Considering this growth of mobile usage, every website should be responsive and images to be displayed beautifully.

Responsive LightBox Plugin

If you own a WordPress site or an e-commerce store using WooCommerce, we are going to introduce one of the most popular plugins that will make your images, videos, and widgets responsive so that mobile visitors do not have any difficulty in viewing the content.

What is Responsive Lightbox?

Responsive Lightbox by dFactory enables users to set up larger versions of images and galleries in a lightbox overlay effect that are optimized for mobile devices. The core plugin is available for free and comes with all of the necessary features you need to get started. And when you want to kick it up a notch, you can access advanced functionality by pairing it with its premium add-ons.

The Responsive Lightbox plugin lets you pick from one of seven lightbox scripts and add them to image galleries, image links, videos, widgets, and comments. What’s more is that the plugin is compatible with WooCommerce, which means you can add Responsive Lightbox scripts to your product galleries.

Responsive Lightbox Features

Responsive Lightbox is a feature-rich plugin that comes with a broad range of powerful functionality right out of the box. Let’s take a closer look at its standout features.

1. Multiple Lightboxes

Responsive LightBox Plugin Scripts

The Responsive Lightbox plugin lets you configure multiple lightboxes including SwipeBox, prettyPhoto, FancyBox, Nivo Lightbox, Image Lightbox, TosRUs (Touch optimized sliders “R” Us), and Featherlight. Each lightbox script brings something new to the table.

For instance, if you wanted your image to light up, have a defined border, and darken the background, then you could select the prettyPhoto lightbox script.

On the other hand, if you were looking for something a little simpler where your image pops out and casts an overlay over the background, then you could select the Nivo Lightbox script.

2. Lightbox for Images

Once you have the Responsive Lightbox plugin installed on your WordPress site, you can begin adding lightboxes to your image links. In fact, the plugin also allows you to configure the settings to automatically add your selected lightbox to all of the images you have published on your site and all future images that you will add to it.

Additionally, you can also choose to display the image’s title, caption, alt text, and description as its title. The image title will appear along with the image when the user opens it up in a lightbox. However, if you would prefer not to have any image title, then you can remove it too.

3. Lightbox for Galleries

Similar to image links, Responsive Lightbox also let you add the lightbox scripts to image galleries. Instead of adding the lightbox script to each gallery item, the plugin lets you add it to the entire gallery. Whenever you create a gallery in your Media Library and publish it to your website, the gallery will open up in the lightbox script you selected.

The plugin allows you to configure the gallery image size (thumbnail, medium, large, and full-size) and use each gallery item’s metadata as its title.

4. Lightbox for Videos

If you have a bunch of videos published on your website, then you can make them look even better by adding a lightbox script to them. Responsive Lightbox let you automatically add lightbox scripts to your videos while you rest assured that your mobile traffic will be able to view them on their devices quickly.

The plugin lets you add lightbox scripts to YouTube and Vimeo videos right out of the box by just enabling its option from the settings screen.

5. Configuration Options

Responsive Lightbox has tons of configuration options that let you fully customize how your lightbox will appear on the front-end. As we mentioned above, you can choose from one of seven lightbox scripts with the free, core plugin. In addition to this, you can also opt to add lightboxes to your content of widgets and comments.

And if you’re technically minded, you can also configure the plugin to enable triggering lightbox scripts on custom jQuery events. The best part is that the plugin is designed to make sure your website’s page loading times aren’t negatively affected. In this regard, the developers have added a neat feature that only loads the lightbox scripts and styles when the user accesses a page that has an image, gallery, or video on them.

Extending Responsive Lightbox

Responsive LightBox Plugin Premium Extensions

The Responsive Lightbox plugin comes with a host of premium extensions that you can install to get access to advanced functionality.

  • Lightcase Lightbox gives you access to customizable displays and tons of transition effects.
  • Photo Swipe Lightbox allows you to improve the navigation experience for mobile websites.
  • Light Gallery Lightbox supports full-screen lightboxes and comes with over 20 built-in animations.
  • Fancybox Pro gives you a mobile-first and touch-enabled lightbox.
  • Strip Lightbox makes your photos slide on the edge of the screen.
  • Justified Gallery allows you to create dynamic photo grids of images.
  • Masonry Image Gallery makes it easy for you to convert your gallery into a Pinterest/Tumblr-like photoset.
  • Slider Gallery transforms your gallery into a responsive slider.
  • Expander Gallery gives you a grid gallery inspired by Google Images.
  • Hidden Gallery launches the gallery with the lightbox overlay when a user clicks a link or an image.

The Photo & Art bundle comes with all ten Responsive Lightbox premium extensions, which is priced less than the individual plugins.

Well-Documented and Supported

The Responsive Lightbox plugin comes with detailed documentation for the developers. Its documentation covers just about everything, including installing the plugin and extensions, a description of general settings and an in-depth look at different lightboxes.

If you’re a WordPress developer and want to delve deeper into customizing Responsive Lightbox for your website, then you can leverage the documentation manual usage section to learn more about it.

In addition to this, the developers also offer a comprehensive troubleshooting page that explains the possible reasons for encountering a particular problem and what you can do to solve it – complete with code snippets!

As far as support for Responsive Lightbox is concerned, the developers over at dFactory offer support through their official website and the plugin’s page in the WordPress Plugin Directory. You can also watch a video tutorial to help you get started.

If you’re looking for a complete lightbox solution for your WordPress website, then Responsive Lightbox is worth a shot.

This core plugin is available free for download, and whenever you want to get access to advanced functionality, you can install any of its ten premium extensions. We encourage you to install Responsive Lightbox and try it out on your own and share your experience in the comments section below.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Mustaasam Saleem

Mustaasam is the WordPress Community Manager at Cloudways - A Managed WordPress Hosting Platform, where he actively works and loves sharing his knowledge with the WordPress Community. When he is not working, you can find him playing squash with his friends, or defending in Football, and listening to music. You can email him at mustaasam.saleem@cloudways.com

Stay Connected:

You Might Also Like...