Lightbox Indicator

Look Demo

Let visitors know it’s a lightbox with a cool corner icon. 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 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.

Customize

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

Notes

No notes.