Squarespace Lightbox with a Button

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

Complete the initial setup of a Squarespace lightbox

Step 2

For this step, we are going to create the text link for the lightbox.

  1. Add the Code Content Block to your page
  2. 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 3

For this step, we are going to create the lightbox that appears after clicking the link from Step 2 above.

  1. Edit the Code Content Block you added in Step 2 above
  2. Paste the code shown below BELOW the code you added in Step 2 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 2 and Step 3, 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 4

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 5

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.