How to Create a Responsive Lightbox Photo Gallery in WordPress. Are you a designer or photographer who has a website with WordPress and are looking for a way to easily display the images of your work and organize the images into a beautiful gallery? If so, then you are right to find this article because here I will discuss in full how to create a photo gallery in WordPress using the Lightbox plugin.
Basically, WordPress currently supports creating image galleries by default without the need to install additional plugins, but of course, because the WordPress gallery is a built-in feature, you won’t find more features like those brought by plugins. In addition, nowadays, there are also many custom built WordPress themes that have built-in functionality to display portfolios by default. But once again by using a theme like that you will not be free to display pictures or galleries in certain areas that you want as the plugin can do.
In the WordPress plugin library, there are many plugins to create galleries, and this will certainly confuse you to choose which one WordPress lightbox plugin the best for you. To save your search time, here I will introduce a cool plugin to create a gallery in WordPress called Responsive Lightbox by dFactory. But before that let’s start with the basic knowledge of this plugin.
What is WordPress Lightbox?
By adding the WordPress Lightbox plugin on your site it will add more value and will be visually more attractive. With the goal of making your media content look beautiful on all devices, the lightbox WordPress plugin can be a very important choice for anyone who has multiple images on their WordPress site.
Responsive Lightbox by dFactory Plugin
Responsive Lightbox by dFactory is a free plugin made by the dFactory developers which is widely used by WordPress users and will still be getting updates. This plugin comes with several scripts that automatically add lightbox to photo galleries, image links, and video links for Vimeo and YouTube. This plugin is very customizable. You can display images in a single post as a gallery, modify the size of gallery images, and set scripts to run based on conditions. You can set jQuery to trigger based on events.
And here are some excellent features that you can get from Responsive Lightbox by dFactory:
- Has 7 responsive lightbox scripts (SwipeBox, prettyPhoto, FancyBox, Lightbox Nivo, Image Lightbox, Tos “R” Us, Featherlight)
- Automatically add lightbox to WordPress image gallery
- Automatically add lightbox to WordPress image links
- Automatically add lightbox to WordPress video links (YouTube, Vimeo)
- Supports WooCommerce product gallery
- Option to display image gallery in single post
- Option to modify original WP gallery relates image size
- Option to set image gallery title from image title, description, alt or description so that the image becomes SEO friendly
- Option to force lightbox instead of custom WP galleries such as the jetpack pot gallery
- Option to trigger lightbox on custom jquery event
- Option to fill scripts and styles only on pages that have images or galleries in post content
- Enter a selector for the lightbox
- Highly customizable settings for individual lightbox scripts
- Support WordPress multisite
- Filter hooks for embedding different scripts based on custom conditions (page, post, category, user id, etc.)
- .pot files for translations are also included
Apart from the above features, you can also add other more amazing features by adding premium extensions. Here are some premium extensions for the responsive lightbox plugin by dFactory.
- Photo & Art bundle ($ 69): All the Responsive Lightbox extensions to make your site beautiful and functional are available in this one Photo & Art Bundle and offered at an affordable price.
- Justified Gallery ($ 19): This lightbox Responsive Extension turns your WordPress native gallery into a gallery that fits your images into a justified grid view.
- Masonry Image Gallery ($ 19): This Responsive Lightbox extension allows you to easily change your default gallery to a Pinterest / Tumblr like photoset.
- Slider Gallery ($ 19): This Lightbox Responsive Extension can turn your WordPress gallery into an awesome, lightweight and fully responsive slider.
- Lightcase Lightbox ($ 19): Lightbox’s beautiful, flexible and responsive Responsive Extension delivers a variety of well-known types of content.
- PhotoSwipe Lightbox ($ 19): This Responsive Lightbox extension will add beautiful picture features to be fully responsive and provide a great experience across all devices, including touch gestures, zoom, social share.
- Lightgallery Lightbox ($ 19): This Responsive Lightbox Extension is a lightweight and mobile-friendly extension to display images in a full-screen lightbox with unique CSS3 transitions.
- Lightbox strip ($ 19): This Responsive Lightbox extension is a unique lightbox that pops out of the edge of your screen and only covers a portion of the page.
How to make a gallery lightbox in WordPress
Creating a WordPress Lightbox gallery with the Responsive Lightbox WordPress plugin is very easy because the steps are the same as creating the default WordPress gallery.
First you need to do is install the WordPress lightbox plugin called Responsive Lightbox by dFactory via your WordPress admin.
Please activate the plugin and you will see a new menu called “Responsive Lightbox” which is part of the submenu of the “Settings” menu. Please click on the menu and you will see a fairly simple plugin settings page.
In “General Settings” there are several settings that you have to check and select such as Lightbox script (this section is to select the effect the image is displayed) and check the Galleries section so that the default WordPress Gallery will be displayed in a beautiful lightbox way. If you have configured the configuration, please click the “Save Changes” button.
In the “Lightbox Settings” you will find different settings depending on the script you select in the General Settings section. You can do the configuration yourself or leave this section by default. If you have configured the configuration, please click the “Save Changes” button.
In “Add-ons” there are several paid extensions that will add features and functionality to the Responsive Lightbox plugin as I explained in the extension at the top.
Next, to create a WordPress gallery, please create a new post or edit an existing post. Place your mouse cursor over the area where you want the Gallery to be placed and click “Add Media”.
The Media Library which contains your own images will open and please click the “Create Gallery” menu on the top left.
You can upload new images for your gallery by clicking the “Upload Files” tab menu or selecting several existing images from your Media library by clicking on each image you have selected so that a check mark appears. If so, please click the “Create new gallery” button. And you can add a Caption, Title, Description and Alt to the image. If so, please click “Insert Gallery”.
Now all the images that you have selected have entered your editor area, if there is something missing you can still edit again by hovering over the image until the edit icon appears. Now to see the results, you click the preview button and you will see your gallery is ready and click the image to see the results of the lightbox view of the responsive lightbox plugin by dFactory. You can see a live demo here ⇒ Responsive Lightbox Demo.
If you are not satisfied with the effect displayed in your gallery, you can return to the settings page and choose the script according to your wishes.
And that’s a complete guide on how to easily create a cool gallery lightbox in WordPress using the responsive lightbox plugin by dFactory. Hopefully this article was useful for you and good luck.