This only works for V3 templates, and this code is no longer maintained. V4 and V5 templates zoom images automatically when clicked, so they don't need it. We strongly recommend upgrading to a V5 template instead.
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 > Customize > Code > CSS, then hit Publish.
/* 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 > Customize > Code > JavaScript, then hit Publish.
<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>