View Categories

Introduction to the MetaSlider Lightbox Plugin

Table of Contents

The MetaSlider Lightbox plugin is a free plugin available from WordPress.org.

This plugin allows you to show a wide variety of media inside a lightbox modal window, including these:

  • Images
  • Image galleries
  • Videos hosted on WordPress sites
  • Vimeo videos
  • YouTube Videos
  • Featured images
  • MetaSlider slideshows

The plugin can be installed from inside your WordPress website:

MetaSlider lightbox

Your images will be shown in a lightbox that looks like this screenshot below:

MetaSlider image lightbox

Your MetaSlider slideshow media will be shown a lightbox that looks like this screenshot below:

MetaSlider slideshow lightbox

How to Apply the Lightbox Automatically #

It is possible to apply the MetaSlider Lightbox features automatically to different types of content and in different post types. You’ll find these settings udner the “Automatic” tab in the plugin.

The first group of settings allow you to decide what types of media will be shown in lightboxes. The options are

  • Images in post content
  • Gallery shortcodes and blocks in post content
  • Videos such as HTML5 videos, YouTube embeds, Video embeds in post content
  • Images and videos in widgets and sidebars
  • Featured images
Automatic MetaSlider lightbox settings

It’s possible to filter these automatic settings further using the “Content Filtering” settings:

  • Processing Mode: You can choose either “Inclusion Mode” or “Exclusion Mode”.
  • Include / exclude specific post types
  • Include / exclude specific Post, Pages or other post types
  • Exclude by CSS selector
MetaSlider lightbox filtering

How to Apply the Lightbox Manually #

WordPress provides a basic lightbox option. It’s possible to override this default lightbox with MetaSlider Lightbox. You’ll find these options under the “Manual” tab.

MetaSlider manual

The WordPress lightbox feature is called “Enlarge on Click”. Here’s how to enable it and to add MetaSlider Lightbox to an image.

  1. Select an image in the block editor.
  2. In the block settings, look for the link icon.
  3. Choose “Enlarge on click”.
Enlarge on click

It’s also possible to apply MetaSlider Lightbox using the Classic Editor. Look for the pencil icon to edit settings for your image, as in this screenshot below.

Classic Editor edit image
  • Choose “Media File” for the “Link To” option as in this next screenshot:
Add Lightbox to Classic Editor image

How to Apply the Lightbox With CSS #

It’s also possible to add MetaSlider Lightbox to image, video or gallery using CSS.

  1. Select an image or gallery block.
  2. In the block settings sidebar, scroll to “Advanced”
  3. Add ml-lightbox-enabled to “Additional CSS class(es)” as in this screenshot below:
Add Lightbox with CSS

For people who want to use the CSS directly, this code will wrap an image in a lightbox:

<div class="ml-lightbox-enabled">
  <img src="image.jpg" alt="Image" />
</div>