Lightbox effect not working with the WordPress theme Salient


WonderPlugin Slider, WonderPlugin Carousel, WonderPlugin Portfolio


This tutorial will guide you how to fix the issue of the lightbox effect not working in the WordPress theme Salient.
Continue reading

How to open an audio player in a WordPress lightbox popup

This tutorial will guide you how to open an audio player created with WonderPlugin Audio Player in a WordPress lightbox popup. We use the plugin WonderPlugin Carousel to create the carousel and the lightbox.
Continue reading

Open a different lightbox gallery for each thumbnail in a WordPress carousel

In WonderPlugin Carousel, when you click on a thumbnail in the carousel, by default, it will open a lightbox galley which includes all images/videos in the current carousel.

This tutorial will guide you how to open a different lightbox gallery for each thumbnail in the carousel. We will use both plugins WonderPlugin Carousel and WonderPlugin Portfolio Grid Gallery.

Continue reading

WordPress Lightbox and AJAX Loading


WonderPlugin Lightbox


I’m using my site a plugin that allows me to query the database and show results without requiring to code… I can also filter results based on search queries…

I’m using the lightbox in one page that uses such a filter/query. When I set my plugin to reload the entire page, it works fine (though pretty slow since there’s a lot of data), but if I filter using AJAX (i.e. the results are filtered without reloading the page), then the click event on the links that trigger the lightbox are removed… Therefore, after the first search/filter, the images are not clickable anymore…

Is there a way to prevent this (the click event from being removed)?


After you use AJAx adding the data, you can call the following JavaScript to re-init the Lightbox:


Change Lightbox default size


I am setting up the Lightbox for Video Commercial version on a clients' site and wondered if there was any way to change the default size?

The Lightbox is responsive but comes in at 960x540 default.


You can use data tag data-width and data-height to change the default size, for example:

<a href="" class="wplightbox" title="Big Buck Bunny Copyright Blender Foundation" data-width="1024" data-height="576">YouTube Lightbox</a>