Lightbox Indicator

grey.gif

Step One

From your Squarespace account, go to Code Injection: Settings > Advanced > Code Injection

Step Two

Copy and paste the code below into the Header Code Injection box. Save the changes when done.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script>$(document).ready(function(){$(".sqs-block .lightbox").each(function(){$(this).prepend("<lbb></lbb>")}),$(".sqs-block-gallery a").each(function(){("light"==$(this).data("lightbox-theme")||"dark"==$(this).data("lightbox-theme"))&&$(this).prepend("<lbb></lbb>")}),$(".sqs-block-gallery lbb").click(function(){$(this).siblings().click()})});</script>

Step Three

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Four

Copy and paste the code below into the Custom CSS Editor box. Save and refresh the page when done. 👍

// Lightbox Indicator //

.sqs-block .lightbox, .sqs-block-gallery a[data-lightbox-theme="light"] img,  .sqs-block-gallery a[data-lightbox-theme="dark"] img{
  pointer-events: none;
}
lbb{
  position: absolute;
  background-image: url(https://static1.squarespace.com/static/5aa78ea65b409ba3f743c19e/t/5c336cc3562fa767ca943048/1546874051518/lightbox.png);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1px;
  width: 30px;
  height: 30px;
  content: ' ';
  display: block;
  top: 10px;
  right: 10px;
  z-index: 9999;
  cursor: pointer;
  pointer-events: auto;
}

Step Five

This plugin works for both images and gallery blocks.

You must have the lightbox setting enabled for the images and galleries that you’d like to target. This setting can be found directly in the image or gallery block design settings.

Screen+Shot+2019-02-08+at+11.34.50+AM.png
Moov Labs