How to open a lightbox gallery popup on clicking a button or text link

This tutorial will guide you how to open a lightbox gallery popup on clicking a button or text link.

There are four steps in this tutorial:

  • Step 1 - Install Wonder Grid Gallery
  • Step 2 - Add a button or text link in WordPress page editor
  • Step 3 - Create a lightbox gallery in Wonder Grid Gallery
  • Step 4 - Add the lightbox gallery to the page

Continue reading

How to open PDF files hosted on Dropbox in a WordPress lightbox popup

Product

Wonder Lightbox 9.4 or above, Wonder PDF Embed 1.8 or above

Tutorial

Wonder Lightbox and Wonder PDF Embed use Mozilla PDF.js to display PDF files. By default, PDF.js only supports PDF files that are hosted on the same domain as the webpage. If your PDF files are hosted on Dropbox, PDF.js will not be able to display them and may show an error "An error occurred while loading the PDF".
Continue reading

How to display PDF files hosted on Amazon S3 in WordPress lightbox by configuring CORS policy

Product

Wonder Lightbox 9.4 or above, Wonder PDF Embed 1.8 or above

Tutorial

Wonder Lightbox and Wonder PDF Embed use Mozilla PDF.js to display PDF files. By default, PDF.js only supports PDF files that are hosted on the same domain as the webpage. If your PDF files are hosted on Amazon S3, PDF.js will not be able to display them and may show an error "An error occurred while loading the PDF".

This tutorial will guide you how to configure the CORS policy of your Amazon S3 bucket, so the PDF files can be displayed by Wonder Lightbox and Wonder PDF Embed.
Continue reading

How to open a Wistia video in a WordPress lightbox

Product: Wonder Lightbox

Tutorial:

After installing the WordPress plugin Wonder Lightbox, by adding a class name wplightbox to a link, you can easily change the link to a WordPress lightbox popup and use it to open an image or a video in the lightbox popup.

This tutorial will guide you how to open a Wistia video in a WordPress lightbox.

Continue reading

How to add a play button over an image and use it to open a video lightbox in Divi Builder

Product:

Wonder Lightbox

Tutorial:

Divi Builder is a powerful yet easy-to-use visual editor. After installing the plugin Wonder Lightbox, by adding a class name wplightbox to the Divi Image module, you can easily open a video or image lightbox popup on clicking the image.

This tutorial will guide you how to add a play button over an image and use it to open an image or video lightbox.

Continue reading

How to add a play button over an image and use it to open a video lightbox

Product:

Wonder Lightbox

Tutorial:

By using the plugin Wonder Lightbox, you can easily open a video or image in a lightbox popup by simply adding a class name wplightbox to the <a> tag. For more information about how to activate the lightbox effect, you can view the help document Wonder Lightbox Help Document.

This tutorial will guide you how to add a play button over an image and use it to open a video lightbox.

Continue reading

WordPress Lightbox and Ajax Loading

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

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