Meow Apps

Meow Lightbox: Tutorial

Navigation Close


In most cases, the Meow Lightbox should work right away.


Click on one of those images, and you’ll see the Meow Lightbox. Try also clicking on an image, then reloading the page. The same image will show up!



By default, the selector is set on:

 .entry-content, .gallery, .mgl-gallery, .wp-block-gallery

This selector represents the CSS elements (separated by commas) in which the lightbox will look for images and does its magic. Depending on the theme, or what you exactly need, the selector might be different. If you are using the galleries in WooCommerce for example, you should this to your selector (with a comma).


Check the FAQ below if you are confused.

Anti Selector

Sometimes, the selector catches too many images and you want specific pages, galleries or photos to be skipped by the Lightbox. You can do this with the Anti Selector. 

In my settings, I set the Anti Selector to ‘.mgl-square’. This CSS class is used by the Meow Gallery for the Square layout, like above. Even the Lightbox should work on it via the Selector, the Anti Selector will void it.


You can start to have a look at this video. This shows you how to use Chome Developer Tools to browse your HTML. You need to find the element (probably a <div> or a <section>) that contains all your content and images. When you find this one, have a look at its id=”xxx” or class =”yyy”. Then your selector will be either “xxx” or “.yyy” (CSS classes start with a dot).
It is usually better to find a good selector, but if you find it complicated, you can use this plugin: Plugin Load Filter.