WordPress gallery light box

How to Add a WordPress Gallery Lightbox [ 4 Easy Steps ]

 |  | 6 Minutes Read | 923 Views

In this blog, I’ll show you how to add a WordPress gallery lightbox in four simple steps.

World’s top image sites, including Freepik, Unsplash, and Pexels, have added powerful lightboxes to their galleries for a better visual experience.

Let’s get into it.

A WordPress gallery lightbox is a modal, popup, or overlay that appears over a WordPress gallery webpage dimming and disabling the rest of the background to show and slide single items for a better visual and interactive experience.

Besides it, the lightbox is also an excellent way for e-commerce sites to present products and boost sales.

Freepik’s lightbox

Freepik lightbox
Freepik lightbox

Unsplash’s lightbox

gallery lightbox
gallery lightbox

Pexels’s lightbox

Gallery lightbox
Gallery lightbox

Follow these four simple steps to add a WordPress gallery lightbox seamlessly in minutes with no code.

It’s a powerful but easy-to-use slider and gallery plugin with a built-in full-featured lightbox.

Besides me, 60,000+ WordPress enthusiasts love this plugin to create mesmerizing sliders and galleries with lightbox effects.

Let’s install WP Carousel Pro.

However, if you need a guide on how to install and activate WP Carousel Pro, please read the documentation or watch this tutorial.

Feel free to reach out to the friendly support team for further assistance.

Once you install and activate WP Carousel Pro successfully, it must be at your WordPress admin sidebar, as seen in the following image. 

Next, add images to your gallery with this powerful plugin with a built-in full-featured responsive lightbox. 

Note: If you want to add a WordPress gallery lightbox to your existing gallery, revamp it with this plugin. It’s simple to create a WordPress photo gallery with WP Carousel.

Add images to WordPress gallery lightbox
Add images to WordPress gallery
  1. First, click WP Carousel Pro.
  2. Next, Click Add New.
  3. Give your gallery a title. 
  4. Leave the Image selected.
  5. Click ADD IMAGE. It will take you to your WordPress media library. There, select the images you want to create a gallery with.

However, if the images you want to add are unavailable, click Upload files (beside the Media Library) and follow the process to upload the images from your computer. 

Optimize images for WordPress gallery lightbox
WordPress media library

When you select an image in your WordPress media library, you will see a sidebar with text fields on the right. They allow you to add alternative texts, titles, captions, etc. Filling them out with phrases that refer to the image properly is always a good practice for SEO and accessibility. So, remember to fill them out.

After filling them out, click Create a new gallery. Then click Insert gallery.

The images have been added. 

Images have been added to WordPress gallery lightbox
Images have been added to WordPress gallery

In addition, you can edit the images and remove all by clicking EDIT IMAGE and REMOVE ALL at the end of the images.

Step 3: Configure the lightbox

As mentioned above, WP Carousel Pro offers a built-in full-featured responsive WordPress gallery lightbox. 

When configured right, it ensures an incredible visual and interactive experience. 

Therefore, see the following screenshot and follow the easy steps to configure it. 

Configure a WordPress gallery lightbox
Configure a WordPress gallery lightbox
  1. Leave the GENERAL SETTINGS tab selected. 
  2. Select Masonry or your favorite layout for your WordPress gallery lightbox. 
  3. Keep Lightbox selected. 
  4. You can see the preview by clicking the SHOW PREVIEW button on the bottom right side. 

Great! The default lightbox has already been configured. 

It shows: 

WordPress gallery preview
WordPress gallery preview

Click an image here.

And see what the lightbox preview looks like.

WordPress gallery lightbox preview
WordPress gallery lightbox preview

It looks appealing. Doesn’t it?

Let’s jump into the fourth tab, LIGHTBOX SETTINGS, to make your WordPress gallery lightbox more appealing and interactive.

That said: 

Although we are now jumping over other tabs to keep the focus on adding a WordPress gallery lightbox, each has many robust features to make your WordPress image gallery more appealing and engaging. 

So, I suggest you explore them and leave none of the necessary features untapped to make the best of your gallery. 

Now, let’s explore the powerful features of the WP Carousel Pro’s lightbox. 

Add WordPress gallery lightbox

You can choose a lightbox icon and Customize its 

  • Position
  • Size 
  • Color 
  • Hover color
  • Background color
  • Hover background color
  • Overlay color

You can disable image hover overlay on the small devices. 

It allows you to customize the overlay background color. 

You can hide or show Image Caption and customize its color. 

Customize WordPress gallery lightbox

You can hide or show the Image Description and customize its color.

It allows you to hide or show the Image Counter.

Autoplay is a fantastic feature for your WordPress gallery lightbox. However, if you enable it, set the autoplay speed properly so the images won’t run away before your visitor see them thoroughly. 

Infinite Loop, also called Endless Loop,  is an important feature. It continually repeats your items when a visitor slides them. Consequently, you can put your item quantity limitation out of sight. Most importantly, select random ordering (available under the GENERAL SETTINGS tab) for your items when you enable the infinite loop.

You can choose any of 6 Transition Effects between slides:

  • Fade 
  • Slide  
  • Circular 
  • Tube
  • Zoom-in-out 
  • Rotate  

Enable keyboard navigation. 

WordPress gallery lightbox setting

Customize the lightbox navigation arrow’s colors. 

Show or hide the bottom thumbnails icon for the lightbox. 

Display or hide the bottom thumbnails gallery for the lightbox. 

Show the zoom button for a more extensive visual experience. 

You can enable Retina Display for a sharper visual experience with higher pixel density.

Show the Full-Screen button on your WordPress gallery lightbox.

Display or hide the Autoplay button. 

WordPress lightbox settings

Show the Social Share button. 

Display or hide the Download button. 

Show the Close button.

Enable Overlay/Outside close with a click. 

Choose an Open/Close Animation type:

  • Fade 
  • Slide  
  • Circular 
  • Tube
  • Zoom-in-out 
  • Rotate 

You can enable or disable Protect Image. When you enable it, it prevents right-click downloading.  

After you design your gallery and configure the lightbox properly, find the Publish or Update button at the top right side.

Publish WordPress gallery with lightbox
Publish WordPress gallery with lightbox

Click the Publish or Update button

After that, go to the page or post you want to display your WordPress gallery with the lightbox. 

Publish WordPress gallery with lightbox
Publish WordPress gallery with lightbox
Publish WordPress gallery lightbox
Publish WordPress gallery
  1. First, click + (the plus icon). 
  2. Next, type WP Carousel Pro in the search bar. 
  3. Click WP Carousel Pro Gutenberg block. 
  4. Click the dropdown. It will show the list of gallery titles (gallery shortcodes) you’ve created. 
  5. Select the title or shortcode you want to publish. 
  6. Finally, hit the Publish or Update button.

Congratulations! It’s done. 

Let’s see how the WordPress gallery lightbox looks. 

WordPress gallery lightbox
WordPress gallery lightbox

Some helpful icons are in the WordPress lightbox at the top right corner. These icons allow visitors to zoom in, view in full screen, play automatically, share, and download the image.

Plus, they can slide the images seamlessly with the right and left arrows.

In addition, they can watch multiple images at a glance and navigate them quickly.

Besides them, you can add many features as you need to make your WordPress gallery lightbox exactly how it should be.

Take away

A lightbox is a must if your website contains a small or big gallery. It ensures a better visual experience. Plus, it makes your gallery more interactive and engaging.

Moreover, by following only four easy steps, you can add your WordPress gallery lightbox in minutes with no code.

So, let’s do it now.

Thanks for reading. We love to read and reply to your comments. So, let’s talk more about it below.

Written by

Manir Husain is a creative Content Writer at ShapedPlugin, LLC. He loves to write articles on WordPress products specially. In his free time, he plays table tennis and spends time with family.

Leave a comment