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

The CSS

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="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function() {
$(function() {
$('#article img').each(function() {
$(this).wrap('<a></a>');
$(this).parent().addClass('lightbox').attr('href', $(this).attr('src'));
});
$('.lightbox').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
})();
</script>

What did you think of this doc?

How to Add Extra Spacing

Add HTML Before the Closing Body Tag

Get in touch

This site is protected by hCaptcha and its Privacy Policy and Terms of Service apply.