Initial Setup of a Squarespace Lightbox

STEP 1

For the lightbox header code, there’s two options of where you can insert it – In the Global Header OR in the Page  Header.

If you are only going to have one or two pages using a lightbox, insert the header code into the Page Header.  If you are going to have lightboxes on a lot of pages, you would then want to insert the header code into the Global Header.

Page Header Steps

  1. Click the gear icon for the page you want to have the lightbox on
  2. Click the Advanced tab
  3. Paste the lightbox header code (see below) into the Page Header Code Injection code area

Global Header Steps

  1. Click on Settings
  2. Click on Advanced (in the Website section)
  3. Click on Code Injection
  4. Paste the lightbox header code (see below) into the Header code area

Lightbox Code for the Header

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />

For the latest version of this code, please visit this developer’s Github page – https://github.com/noelboss/featherlight

STEP 2

For the lightbox footer code, there’s two options of where you can insert it – In the Global Footer OR in the Page.

If you are only going to have one or two pages using a lightbox, insert the footer code into the Page.  If you are going to have lightboxes on a lot of pages, you would then want to insert the footer code into the Global Footer.

Page Footer Steps

  1. Click the Edit button to go into Edit mode on the page you want to have the lightbox on
  2. Scroll to the bottom of the page
  3. Add a Content Block to the page
  4. Select the Code Content Block
  5. Paste the lightbox footer code (see below) into the Code Content Block

Global Footer Steps

  1. Click on Settings
  2. Click on Advanced (in the Website section)
  3. Click on Code Injection
  4. Paste the lightbox footer code (see below) into the Footer code area

Lightbox Code for the Footer

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

For the latest version of this code, please visit this developer’s Github page – https://github.com/noelboss/featherlight