Lightbox Indicator

Look Demo

Let visitors know it’s a lightbox with a corner icon – works with image blocks and gallery blocks. This plugin uses css editor, code injection, and works with all template families.

How To Install

From your Squarespace account, go to Site Code Injection. 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>

Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

Save and refresh the page when finished.

// 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;
}

This plugin works for both image blocks 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 block or gallery block design settings.

Customize

You do not need to change any of the values or properties.

License

This plugin comes with an Unlimited Use License. View License Terms