Adding Lightboxes to Images

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 Scripts.

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 > Scripts
<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?