The Squarespace lightbox with text will allow you to have an image be hyperlinked to a lightbox and the lightbox will display text only. 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. 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
<a href="#/" data-featherlight="#bio-john"><img src="https://static1.squarespace.com/static/58bcc3b8db29d66bb3b919f0/58c01070893fc05ff99c2f77/5b6c88fd21c67c3d1c61e73d/1533839615985/john-smith-bio-picture.png" alt="John Smith"></a>
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"> <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
<a href="#/" data-featherlight="#bio-john"><img src="https://static1.squarespace.com/static/58bcc3b8db29d66bb3b919f0/58c01070893fc05ff99c2f77/5b6c88fd21c67c3d1c61e73d/1533839615985/john-smith-bio-picture.png" alt="John Smith"></a>
<div style="display:none;">
<div id="bio-john">
<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.