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.
- 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 3
For this step, we are going to create the lightbox that appears after clicking the link from Step 2 above.
- Edit the Code Content Block you added in Step 2 above
- 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.