What Is WordPress Lightbox and How to Add It

What Is WordPress Lightbox and How to Add It

Do you want to display your featured products and featured posts in the most obvious and surprising manner? Do you want to encourage your first-time readers to sign up an account and to log in every time they land on your site? Do you want to expand your email list by highlighting your opt-in form? If so, we highly suggest the utilization of a WordPress lightbox that comes with a popup effect.

If you haven’t heard this term before or are not very clear of what it is actually, this post is just for you, which introduces what is WordPress lightbox and how to add it to your website to achieve different goals.

Basic Explanation of WordPress Lightbox

In fact, you can regard the lightbox as a popup window or as an overlay that is used to showcase your images, videos, forms, album, photo gallery, slideshows and many more on your pages with the highlighting function. However, once the lightbox works, the rest of the original page content will darken but is still visible on the page edges.

Frankly speaking, to focus readers on your core content, the lightbox is better than anything for it can keep people staying at the current webpage all the times. They do no need to leave at all.

Lightbox Sample

As for the working principle of this special feature, actually, the WordPress lightbox is designed and developed based on jQuery, JavaScript or CSS3 that comes with the modal window element. To achieve the highlight purpose, the lightbox will separate your webpage into the parent mode and the child mode. The former mode means your original webpage while the latter mode means the popup or the overlay.

In this case, once the child window is displayed, the parent one will darken so that people can hardly check its content. To stop the child mode, readers have to interact with it, such as clicking it or pressing the Close button.

How to Create and Add the WordPress Lightbox?

To create and add the lightbox to your WordPress site, you can choose the manual way by coding on your own. This gives you the freedom to achieve the exact features you want. However, the prerequisite is that you are familiar with the coding practice and know a lot for CSS, HTML, jQuery and JavaScript.

If you are just a common webmaster who does not want to dig into the website coding, you can try the WordPress plugins. In the following, we’d like to introduce three options that help you create the lightbox with different functions. Note that all of them can achieve the responsive lightbox for you.

Option 1 – WP Lightbox 2 for Images and Galleries

If you only want to add the great lightbox effect for your images or photo galleries, this WP Lightbox 2 plugin is your option. The general settings of it are pretty simple. You only need to enable this function for all your image links.

If you want, you can also optionally enable lightbox for all your comments, display the download links for the showcased images, show the image information on the top of the box and add some additional text below the info.

As for the display settings, you can set the overlay opacity based on your preference, reduce some large images for fitting the small device screens, change the minimum margin from the top position and determine the animation duration for each lightbox.

WP Lightbox Settings

The single image display just looks as below.

WP Lightbox Sample Images

In addition, it is possible that you have a group of related images and you want to show them using the lightbox. For this, you can leverage the [roadtrip] attribute just as following.

roadtrip Attribute

This way, you can display a series of images using a lightbox with the “Next” and “Preview” button.

Group Images

Even, when showing your photo gallery, you may want to disable the lightbox function for some images. In this case, you can add the “nobox” rel attribute to the target images.

Option 2 – WP Video Lightbox for Videos

If you want to add the lightbox for your YouTube and Vimeo videos, you can try this WP Video Lightbox plugin. To use it, you firstly need to decide some settings by clicking Settings > Video Lightbox. Here, you can determine the animation speed and the slideshow interval, enable the automatic slideshow, set the value of opacity, allow the freedom of resizing and expanding, choose a theme for the lightbox window, auto-play the video, showcase a close button to stop the video play and many more.

These settings are easy to understand and you just need to configure them totally based on your needs.

WP Video Lightbox Settings

Next, to display the video, you can use the below shortcode. There is no need for you to download the video and upload it to your website. You simply need to find your video ID and enter it into the shortcode. This can save your disk storage and bandwidth a lot.

WP Video Lightbox Shortcode

Note that you can change the anchor text to the image URL of the video thumbnail. In addition, you need to remember that this plugin now only supports the videos from Vimeo and YouTube.

WP Video Lightbox Sample

Option 3 – Lightbox Popup for Custom Contents with the Popup Effect

If you are looking to create the popup lightbox with some custom contents, you can use this Lightbox Popup plugin. Here, you simply need to click XYZ Lightbox > Lightbox Popup.

In this page, you can enter the core content of this popup lightbox, such as the text, videos, images, audios, forms and many more. Note that you can even enter the shortcode generated from other plugins. This gives you the great chance to add the lightbox effect for your subscription form, login form, contact form, online survey and many more.

Lightbox Contents

For instance, we have created a contact form using the Contact Form 7 plugin and have pasted the shortcode into the lightbox content section, achieving the automatic form display with the lightbox effect just like the following.

Lightbox Contact Form

Next, you can determine some settings for the lightbox display.

There are 9 options of the default lightbox positioning for you to choose. However, if you want to decide the exact coordinates, you can choose to manually edit the positioning.

In addition, you can determine the percentage or the pixel for the lightbox width and height.

Positioning Settings

Now, you should determine the display logic. There are three choices for you – based on the delay in seconds, based on the number of webpages that have been checked and based on both conditions. The “Delay” logic means the lightbox will appear after a few seconds when people land on your webpages. The “Pages Browsed” logic means the lightbox will appear after people have browsed some pages of your site.

Besides, you need to decide the repeat interval for the lightbox showcase based on hours or minutes. If the value is 0, this special box will be displayed on each trigger.

Also, you can choose to show the Close button to stop the lightbox.

Display Logic

In the Lightbox Style part, you should decide the appearance of your lightbox, such as the color scheme, overlay opacity, border width and many more.

Style Settings

The Placement is the last setting for the lightbox display. If you choose the Automatic placement mechanism, the lightbox will appear on all your pages. If you choose the Specific Pages option, you can show the lightbox on pages only, posts only or the homepage only. If you choose the Manual option, you can leverage the generated shortcode into your target pages or posts for the lightbox display.

Placement Settings