You can use the MetaSlider Lightbox plugin to show images inside a lightbox modal window.
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 live demo of how this works.
How to Apply the Lightbox Automatically #
It is possible to apply the MetaSlider Lightbox features automatically to your image. You’ll find this setting under the “Automatic Mode” tab in the plugin. Enable the setting labeled “Images in post content”.
It’s possible to filter this 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
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.
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.
- Choose “Media File” for the “Link To” option as in this next screenshot:
How to Apply the Lightbox With CSS #
It’s also possible to add MetaSlider Lightbox to image, video or gallery using CSS.
- Select an image or gallery block.
- In the block settings sidebar, scroll to “Advanced”
- Add
ml-lightbox-enabledto “Additional CSS class(es)” as in this screenshot below:
