LightboxIndicator.gif

Lightbox Indicator

Our Lightbox Indicator plugin adds an indicator to the top right corner of your images and galleries with the 'Open in Lightbox' option selected. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

 

 

Step 1: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or in the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

Copy & paste this code:

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

Site wide Code Injection:

 

Individual Page Header Code Injection:

 

 

Step 2: Insert the CSS

Insert the following code into your Squarespace site's Custom CSS editor or the Individual Page Header CSS injection (more info below) - the values in bold can be changed to suit your branding and site design. 

Note: If you wish to change the arrow image that is displayed in the corner of your lightbox enabled images, you will need to source your own image and replace the 'background-image' URL below. 
 

Copy & paste this code:

/* LIGHTBOX INDICATOR CSS */

.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/59ba73d08419c2e58efe4437/t/59e8677fd0e6288d04070577/1508403071430/LightboxButtonLight.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;
}
 

Finding your Custom CSS editor:

 

Individual Page Header CSS injection

 

⚡️Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.