The Squarespace lightbox with image will allow you to have a button be hyperlinked to a lightbox and the lightbox will display text and an image. A good example of where you may want to use this is for a person's bio. For this example, we are going to have a lightbox that displays the bio for John Smith as well as his picture. For a demo of this, scroll to the bottom of this page.
Step 1: Insert Lightbox Header Code
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
Click the gear icon for the page you want to have the lightbox on
Click the Advanced tab
Paste the lightbox header code (see below) into the Page Header Code Injection code area
Global Header Steps
Click on Settings
Click on Advanced (in the Website section)
Click on Code Injection
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: Insert Lightbox Footer Code
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
Click the Edit button to go into Edit mode on the page you want to have the lightbox on
Scroll to the bottom of the page
Add a Content Block to the page
Select the Code Content Block
Paste the lightbox footer code (see below) into the Code Content Block
Global Footer Steps
- Click on Settings
- Click on Advanced (in the Website section)
- Click on Code Injection
- 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
Step 3
For this step, we are going to create the text link for the lightbox.
Add the Code Content Block to your page
Paste the code shown below in the Code area
<div style="text-align:center; padding:0;"> <a href="#/" data-featherlight="#bio-john" class="sqs-block-button-element--medium sqs-block-button-element" style="background-color:#000; color:#fff; padding:20px 20px;">View John's Bio</a> </div>
After you tested the lightbox and if it isn't working, replace "#/" with "#" to see if that works
Step 4
For this step, we are going to create the lightbox that appears after clicking the link from Step 3 above.
Edit the Code Content Block you added in Step 3 above
Paste the code shown below BELOW the code you added in Step 3 above
<div style="display:none;"> <div id="bio-john" style="text-align:center;"> <img src="https://static1.squarespace.com/static/58bcc3b8db29d66bb3b919f0/58c01070893fc05ff99c2f77/5b6c88fd21c67c3d1c61e73d/1533839615985/john-smith-bio-picture.png" alt="John Smith" /> <p>John Smith grew up in a small town in Michigan and later moved to Florida. He attended school at Vandelay Industries College and went on to work for the New York Yankees.</p> </div> </div>
So, after you pasted the code from Step 3 and Step 4, below is the entire block of code you should have
<div style="text-align:center; padding:0;"> <a href="#/" data-featherlight="#bio-john" class="sqs-block-button-element--medium sqs-block-button-element" style="background-color:#000; color:#fff; padding:20px 20px;">View John's Bio</a> </div> <div style="display:none;"> <div id="bio-john" style="text-align:center;"> <img src="https://static1.squarespace.com/static/58bcc3b8db29d66bb3b919f0/58c01070893fc05ff99c2f77/5b6c88fd21c67c3d1c61e73d/1533839615985/john-smith-bio-picture.png" alt="John Smith" /> <p>John Smith grew up in a small town in Michigan and later moved to Florida. He attended school at Vandelay Industries College and went on to work for the New York Yankees.</p> </div> </div>
Step 5
Test out the lightbox. I recommend to open the page in a browser window where you aren't logged into Squarespace. If you are using Google Chrome, open up an Incognito Window and go to your page URL.
Step 6
After you tested the lightbox and verified it works, the last step is to go back into Edit mode and edit the text I provided you with your own text along with updating the URL to your own image for the bio.
Inspired by: Squarespace Lightbox with a Button
