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
This only works for V3 templates

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?

Condense Top Article Spacing on Bars V4

Overriding the Font on Your Knowledge Base

Get in touch

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