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.

1. Ajax Loading WordPress Theme

Many WordPress themes support Ajax loading. When navigating to a new page, it does not actually go to the page, it just uses Ajax to load the content from the backend, then dynamically updates the page content. The processing does not trigger a document ready event. If the content contains wplightbox links, they will not be initialised and will not work.

In this case, you can add the following shortcode to the WordPress post or page that contains the wplightbox links.

[[wonderplugin_lightbox_init]]

You only need to add the shortcode to the page once, no matter how many wplightbox links are contains in the page.

The shortcode will render the JavaScript to initialise the lightbox links, so when the theme uses Ajax to load the content, the JavaScript will also be loaded and exexuted.

2. Ajax Loading Query or Filter Result

If a WordPress page uses Ajax to load and display query or filter result, if the result contains lightbox links, the lightbox will not work. The reason is the same, the lightbox links don't have a chance to be initialised.

The query result normally doesn't support shortcode, in this case, you can directly call the following JavaScript to initialise the Lightbox after the Ajax data is loaded and rendered:

jQuery(".wplightbox").wonderpluginlightbox();