Adding Lightboxes to Images

River Sloane Updated by River Sloane

Lightboxes allow your customers to expand an image or a GIF for a closer look. This might be useful for the little details they can't quite see without expanding or accessibility for people with vision impairment.

To use a lightbox, you'll need to use CSS and Javascript


Paste this snippet into Settings > Code > CSS.
/* For image lightbox */
.mfp-bg { z-index: 9999 !important; }
.mfp-wrap { z-index: 10000 !important; }
.lightbox:focus { outline: none !important; }

The JavaScript

Paste this snippet into Settings > Code > Javascript.
<link href="" type="text/css" rel="stylesheet">
<script src="" type="text/javascript"></script>
<script type="text/javascript">
(function() {
$(function() {
$('#article img').each(function() {
$(this).parent().addClass('lightbox').attr('href', $(this).attr('src'));
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true

What did you think of this doc?

How to Add Extra Spacing

Add HTML Before the Closing Body Tag

Get in touch