Tutorial

In most cases, the Meow Lightbox should work right away. First, here is a quick demo of the Meow Lightbox. Click on one of those images, and you’ll see the lightbox. Try also clicking on an image, then reloading the page. The same image will show up!

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.

Performance

For Meow Apps, performance is always a top priority; however, that is not always easy as it depends a lot on your WordPress as well. By default, the settings are as follow.

If you need the lightbox to be enabled in the sidebar, in the header or in the footer (which are areas outside of the content), or if your theme is old and not built on the the responsive image system, you will need to enable Output Buffering. Otherwise, it’s better to turn it off.

As for the Parsing Engine, DiDom is much faster; however, if your HTML is badly it will not work and you should use HtmlDomParser instead.

Customization

If you don’t know how to add custom code to WordPress, please check the artile about Add Custom PHP Code to WordPress.

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.

Allow download only in certain conditions (users, roles, etc).

add_filter( 'mwl_download_link', function ( $download_link, $attachment_id, $meta ) {
	$id = get_current_user_id();
	if ( !empty( $id ) ) {
	  return $download_link;
	}
	return null;
}, 3, 10 );

FAQ

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.