In most cases, the Meow Lightbox should work right away.
Demo
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!
Usage
Selector
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).
.woocommerce-product-gallery
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.
FAQ
Filters
There are numerous filters available. They allow you to modify the behavior of the Meow Lightbox.
Customize the title (or another field)
Let’s say you would like to display the ID of the media entry. You would simply need to add this code in your install (you can also use the plugin Code Snippets).
add_filter( 'mwl_img_title', 'my_filter_title', 10, 3 );
function my_filter_title( $title, $id, $meta ) {
return $id;
}You can actually use the same method for the description (mwl_img_description), caption (mwl_img_caption), GPS, copyright, camera, lens, date, aperture, focal length, iso, and shutter speed.
Note that those results are cached, so if you add your own filter, you will need to reset the cache of the Lightbox.