View Categories

Introduction to the MetaSlider Lightbox Plugin

Table of Contents

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

The plugin can be installed from inside your WordPress website:

MetaSlider lightbox

Media Types Supported by MetaSlider Lightbox #

The MetaSlider Lightbox 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

How MetaSlider Lightbox Displays #

Using MetaSlider Lightbox, your media will be shown in a lightbox that looks like this screenshot below. In fact, you can click on the “Open in lightbox” button to get a demo of how this works.

MetaSlider image lightbox

If you’re using MetaSlider Lightbox together with a MetaSlider slideshow, your media will be shown a lightbox that looks like this screenshot below. Notice that there is thumbnail navigation to allow users to browse the media. There is also a count in the top-right corner showing how many items are in the gallery.

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 under the “Automatic Mode” 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
  • Minimum Image Width and Minimum Image Height
MetaSlider Lightbox settings

How to Apply the Lightbox Manually #

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

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

  • Select an image in the block editor.
  • In the block settings, look for the link icon.
  • Choose “Enlarge on click”.
  • Now when a user clicks on this image, it will open up in a modal provided by the MetaSlider Lightbox plugin.
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>