WordPress Lightbox and Ajax Loading

Last updated on

Product:

Wonder Lightbox Version 9.3 or above

Tutorial:

After installing the plugin Wonder Lightbox, simply adding a class wplightbox to any link will activate the lightbox effect and open the image, video, PDF or webpage in a lightbox popup.

The plugin Wonder Lightbox initialises the lightbox effect in the jQuery document ready event. But if the webpage content is loaded via Ajax (asynchronous JavaScript and XML), the wplightbox links in the content will not have a chance to be initialised and hence will not work.

This tutorial will discuss two types of Ajax loading and provide solutions for each type.

Continue reading →

How to show HTML content in a WordPress lightbox

Last updated on

This tutorial will guide you how to show HTML content in a WordPress lightbox by using the plugin Wonder Lightbox.

The tutorial will also discuss how to open the HTML content in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel

There are two steps in this tutorial:

  • Step 1 - Add the HTML content to a div on the webpage
  • Step 2 - Open the div in a WordPress lightbox
  • Additional - Open the div in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel

Continue reading →

How to show shortcode content in a WordPress lightbox

Last updated on

This tutorial will show you how to show content created with a shortcode in a WordPress lightbox by using the plugin Wonder Lightbox.

There are two ways to show content created with a shortcode in a lightbox:

  • Method 1 - Add the shortcode to a div on the same page then show the div in a lightbox
  • Method 2 - Add the shortcode to a standalone WordPress page then open the page in a lightbox

Continue reading →

How to add a close lightbox link in the WordPress lightbox popup

Last updated on

Product:

Wonder Lightbox

Tutorial:

In the lightbox created with Wonder Lightbox, there is a close button on the top right corner of the popup.

But in some cases, if you use the lightbox to open a div, you may want to add an extra close lightbox link to the div content, or you may want to add the link to the title if you open an image lightbox or video lightbox.
Continue reading →

How to open a popup lightbox gallery when clicking a button in Divi

Last updated on

Divi Page Builder is one of the most popular WordPress drag and drop page builders. This tutorial will guide you how to open a lightbox popup gallery when clicking a button in Divi page builder.

There are four steps in this tutorial:

  • Step 1 - Install Wonder Grid Gallery
  • Step 2 - Add a button module in Divi page builder
  • Step 3 - Create a lightbox gallery in Wonder Grid Gallery
  • Step 4 - Add the lightbox gallery to Divi page builder

Continue reading →