Lightbox Indicator

LightboxIndicator.gif

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

sitewide-1.png
sitewide-2.png
sitewide-3.png

Individual Page Header Code Injection:

download.png
header-2.png
header-3.png
header-4.png

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. 

Where colour values are added, you can use either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB(a) value e.g. rgb (255,255,255) or rgba (255,255,255,0.8) - optional opacity value '0.8'

  • HSL(s) value (optional opacity values '0.8') e.g. hsl (0, 0%, 20%) or hsla (0, 0%, 20%, 0.8) - optional opacity value '0.8'

If you need help finding colours and building colour palettes - coolors.io is an awesome resource!

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

Site wide CSS Injection:

sitewide-1.png
sitewide-2.png
sitewide-3.png
sitewide-4.png
 

Individual Page Header CSS Injection:

If using this method, be sure to wrap your CSS in <style></style> tags as shown in image 4!

header-2.png
header-3.png
header-4.png
 

Step 3: 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.

Noughts & Ones