5 min read 1 mo ago

Dynamic Media Loading

When your page loads, all the static media content (within your chosen selector) should automatically be marked as ready to open in the lightbox, so you can click on any image right away to view it.

For dynamic content, such as media loaded after the initial page load by a third-party plugin or something like Meow Gallery, the lightbox needs to re-render to include the new items.

This re-rendering happens automatically if you configure it properly.

Go to Settings → Advanced → Dynamic Rendering Delay (ms). When you set this value to something other than 0, the plugin will wait that number of milliseconds after the page loads, then rerun the selector. This ensures any dynamically added media is detected and added to the lightbox automatically.

When this happens, the system sends a request to the server to fetch information about the newly added images.

This only works if your WordPress REST API is enabled and accessible. If it’s not, you might see a 401/403 error, meaning the request was blocked.

You have two options:

1. Enable your WordPress REST API for visitors ( Recommended )

This is the easiest and recommended fix to ensure everything works smoothly. If you’re not sure how, ask your hosting support to enable it for you.

It might already be enabled but not allowed for all of your users. If you are using a membership or security plugin, it might have specific settings that block certain users from using it. Make sure to either disable that restriction or add an exception for the “meow-lightbox/v1” namespace.

2. Disable dynamic fetch

You can tell the lightbox not to send any requests by using the same settings as below:

To do this, check the “Dynamic Fetch Disable” option, and also enable “Include Orphans” to ensure media without metadata can still appear in the lightbox.

Additionally, enable “Force Script Loading (OB)”, this allows the system to fetch content that isn’t explicitly present in your HTML. When used with compatible dynamic plugins (like Meow Gallery), it will still be able to load the correct metadata without sending any requests.

For Developers

Manually Render Dynamic Content

Meow Lightbox provides 3 global functions that allow developers to dynamically add images and re-render the lightbox. These functions are particularly useful when:

  • Loading images dynamically via AJAX
  • Implementing infinite scroll galleries (Works out of the box with Meow Galleries)
  • Adding images to the page after initial load
  • Working with single-page applications (SPAs)
  • Integrating with third-party gallery plugins

Both functions are exposed on the global `window` object and can be called from anywhere in your JavaScript code.

renderMeowLightbox

This function completely re-renders the Meow Lightbox. It’s the main function you call after dynamically modifying your page’s images. This ensure all new images on the page are part of the lightbox.

// Re-renders the Meow Lightbox, processing any queued images and reinitializing the lightbox interface.
window.renderMeowLightbox()

This does not add the media to the lightbox, this just re-create the lightbox with the current available data. As the <img> elements do not contain this data, you need to query it from your media entry directly. To do that automatically, you can enqueue this media in the lightbox before re rendering it, using the addToMeowLightboxQueue function.

addToMeowLightboxQueue

When you add images to your page dynamically (after the initial page load), they will not automatically irrigate the lightbox with their Media Entry data (EXIF). This function queues these images for processing before re rendering the lightbox.

// Adds a dynamically loaded image element to the processing queue so it can be included in the lightbox.
window.addToMeowLightboxQueue(imgElement)

What this function does:

  • Validates that the provided element is a valid `<img>` HTML element
  • Extracts the image’s `src` attribute
  • Adds the image to an internal queue for batch processing
  • The queue will be processed the next time `renderMeowLightbox()` is called
  • The parameter must be an `HTMLElement` instance
  • The element must be an `<img>` tag (case-insensitive)
  • The image must have a valid `src` attribute

If an invalid element is passed or if the image has no `src` attribute, the function logs an error to the console and returns early.

// After loading an image via AJAX
const newImage = document.createElement('img');
newImage.src = 'https://example.com/dynamic-image.jpg';
document.querySelector('.gallery').appendChild(newImage);

// Add it to the lightbox queue
window.addToMeowLightboxQueue(newImage);

// Re-render the lightbox to process the queue
window.renderMeowLightbox();


// ---

// ❌ WRONG - Passing a URL string instead of an element
window.addToMeowLightboxQueue('https://example.com/image.jpg');

// ❌ WRONG - Passing a jQuery object
window.addToMeowLightboxQueue($('img')[0]); // Use [0] or .get(0) to get the DOM element

// ✅ CORRECT - Passing a DOM element
const imgElement = document.querySelector('img.my-image');
window.addToMeowLightboxQueue(imgElement);

renderMeowLightboxWithSelector

This function allows you to automatically queue and render all media elements (like <img>) from a specific selector, without needing to call both addToMeowLightboxQueue() and renderMeowLightbox() manually.

Example:

window.renderMeowLightboxWithSelector('.mgl-gallery')

This command will find all <img> elements inside the container with the class .mgl-gallery, queue them, and then render the lightbox automatically.

You can verify that everything is working by checking your browser console logs. You should see entries like:

ℹ️ Image already has mwl_data: 2791
🎞️ Rendering Meow Lightbox with delay: 300
🚚 Sending request to get the new mwl_data for [{…}]

These logs confirm that your images are being queued correctly and that the lightbox is rendering as expected.