Jump to content

Button That Pops a Text Lightbox?

Recommended Posts

  • 8 months later...

@anacariniseiford Hopefully the answer I provided gives you want you want.


For the page you want to have the Lightbox on (ex. Bio page), click the gear icon for that page’s settings, then click the Advanced tab. Paste the code below into the page header code injection box:

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>


On your Bio page, add a “Code” block and paste in the code below. This is the Lightbox that appears with that person’s bio information. You can style this more with CSS as well as include an image if you want, the code below is just for bio text.

<div style="display:none;">
<div id="bio-john">
 Insert the bio text here


On your Bio page, add a “Code” block and paste in the code below. This is to create a link to the Lightbox that will appear when you click on that person's bio (ex. Learn more about John Smith).

<a href="#" data-featherlight="#bio-john">Learn About John</a>

If I wanted to make that link a button instead of a text link, I would use the code below

<div class="sqs-block button-block sqs-block-button">
 <a href="#" data-featherlight="#bio-john" class="sqs-block-button-element--medium sqs-block-button-element">Learn About John</a>

If you are going to have multiple bio’s, then you would repeat step 2 & step 3, but would replace “bio-john” with the next person / something different (ex. bio-jack )

Link to comment

This isn't working for me either. Inspecting the page, I see a "jQuery is not defined" error. I think the source URLs in step 1 aren't working because a new version of Featherlight (1.4.0) has been released (see here). That said, updating the URLs gives me new errors and it still doesn't work. Hoping someone who knows what they're doing will come clear it up.

UPDATE: Got it working by replacing the stuff in step 1 above with the stuff from here.

Edited by Peter_Kovalsky
Initial Revision
Link to comment

Hi @kenwestphal .

I think I've done what you described in the first 3 steps here. I get a click-able like for "Learn About John", but the lightbox with the words "Insert bio data here" doesn't pop up. I'm presuming that all three steps are on the same page, right? Step 1 code goes in the header insertion (in the wheel in the page menu), and the other 2 steps' code go in separate code blocks on that same page, right? So the content of the lightbox is contained in the 2nd step code "Insert bio text here" ... is this right? Any suggestions for what I might be doing wrong?

Link to comment

Hi @neilrolnick

From @Peter_Kovalsky comment above, it appears that for some users, you may need to replace the code I have for Step 1 with the updated version of Featherlight to get it to work. Try the code below to see if that works for you.

You are correct - all the code goes into the same page (ex. Bio page). You are also correct that the content of the Lightbox would go where I have "Insert bio text here"

<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Link to comment


Thanks for posting your update.

FYI - Since this solution worked for me, I decided to post it for this person to try to see if it would work for them. As a Squarespace user and a new Community/Answers member, I want to contribute to try to help others out there since this area has helped me when I had questions. While I don't know everything, I try to contribute to areas I can and learn from others.


Edited by kenwestphal
Link to comment

Having played with it a little, you can actually put the latter two steps in the same code block. For example, you can have this:

 <a href="" data-featherlight="#john-bio">Learn about John</a>

<div style="display:none;">
 <div id="john-bio">
   <p>Insert bio here</p>

All in one code block.

As for the header injection, this is what I've got:

<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script></link>

Seems to be working!

Edited by Peter_Kovalsky
Link to comment
  • 2 weeks later...

I figured out how to match the body font and figured I'd post here for others.

Use this as the code block to create the lightbox:

<div style="display:none;">
<div id="bio-john">
<p>bio text here</p>
<a href="#" data-featherlight="#bio-john" data-featherlight-variant="fixwidth">Full Bio</a>

Then add this in your custom CSS (where the font styling matches your body text... you can copy and past your own font styling by using "web inspector" and searching for your primary font name until you find the block for regular body font):

.fixwidth .featherlight-content {
   font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
   font-weight: 400 !important;
   font-style: normal !important;
   font-size: 16px !important;
   color: rgba(26,26,26,0.7) !important;
   letter-spacing: 0px !important;
   line-height: 1.6em !important;

Link to comment
  • 4 months later...

Thank you all for this great thread! I followed it and it's working almost perfectly on my site.

The problem I'm having is in portrait mobile mode (I'm using an iPhone 5s to test). In landscape the mobile view looks great, but in portrait view the right side of the lightbox is clipped off, which includes the close button in the upper right.

Has anyone come across this before? Does anyone have a fix? Thank you in advance!

UPDATE: I figured out that the problem is HTML tables. Tables don't work properly on the smaller smartphone screens, so avoid them in the lightboxes.

Edited by aarnaa
Initial Revision
Link to comment
  • 4 weeks later...

Hi all,Very helpful thread here. Can someone help me with code for centering the text in the link that brings up the lightbox? Ie, "Learn About Joe" is the lightbox link, and I'd like to center the text as it sits below a photograph.ThanksMike

Link to comment

@kenwestphal Thanks! I have the page working well aside from one technical issue I can't solve:

There are (6) Headshot Images on the page (2 rows of 3 image blocks) and each has a corresponding body link (code block) below that clicks through to a text lightbox. I've attached a screen shot, because the website isn't published.

All 6 body links work correctly, however for some reason the Image Blocks themselves have become clickable: IE > Image Block 2 brings up the Image 1 Lightbox, Image Block 3 brings up the Image 2 Lightbox... etc.

I've deleted all the blocks and rebuilt the page 2x, however the problem reoccurs.

Any insights would be appreciated.

Thanks!alt text


Link to comment

@kenwestphal Thanks. "Lightbox" is unchecked on all 6 images, and there is no click-through URL. The oddity is that the "positioning" of the Image Blocks (in relation to the Code Blocks) appears to make some of them click-throughs.

Is it possible that the custom CSS Code Blocks are somehow linking to the Image Blocks inadvertently? I've combed through all the Code Blocks, and they're all identical except for the specific content they carry.

I moved the image blocks around, deleted some, created some new ones, and by process of elimination solved some of the hiccups, but a few still remain. I'm not able to share the website at this time unfortunately.

Link to comment

@kenwestphal Hi Ken. I solved the issue with images becoming clickthroughs! Last question: Can you help me with code for reducing the width of the lightbox, and the content inside the lightbox? I've tried this in the Custom CSS editor, but it doesn't work:

.sqs-lightbox-slide .sqs-lightbox-padder{text-align:center!important;}.sqs-lightbox-slide img.summary-thumbnail-image{max-width:1200px!important;height:auto!important;left:auto!important;right:auto!important;}


Link to comment

@Lot71Sorry for late delay in response. I would have you remove the code for "max-width:1200px !important;" since the lightbox should scale accordingly since it does for me on my website where I use them. I don't have any code for my lightboxes in regards to height or width and they fit fine with images & a picture. However, you should be able to add "width:80%;" to the .sqs-lightbox-slide part of your Custom CSS code and that should reduce the width.

If you are able to provide a link to the webpage or a screenshot of the webpage, it may help if the above info doesn't.

Link to comment
  • 5 months later...

@kenwestphal Hi there, I've been going through your comments and trying out the code suggestions you have given. Unfortunately, when I go through the steps and then click on the button its created, it takes me back to my home page. Do you have any idea how I can fix this? I'd really appreciate your help!

Link to comment
  • 3 weeks later...

Hi there @kenwestphal, thanks so much for all your comments on this thread. I've tried everything multiple times, including your blog but I can't seem to get it to work for me. When I click the button it takes me to the top of the page, but no lightbox appears. I've updated the header code for featherlight/1.7.2, and added the jquery to the header. Has anyone else encountered similar problems or have any suggestions? I would be so grateful for any suggestions!

Link to comment

I managed to solve it for anyone experiencing similar issues - my page was in an index of the pacific template, so the header code was not working when I added it to the specific page - I added it directly to the index page and problem solved.

Link to comment
  • 1 month later...

Hi @egrace and JessicaDevlin,

Hoping you might be the one to help me here since I also have Pacific template! So this was working last night for me using @Peter_kovalsky 's method below. It stopped working today and clicking the button didn't open up a lightbox and like you - it just took me to the top of the page. I updated lightbox to the newest version (1.7.5 as of this writing) and that seemed to partially fix it. The lightbox is popping up again, but it's still jumping me up to the top of the page. Any thoughts? Thank you!

Link to comment

This is my first time posting on here so I apologize if this is redundant as I sort of alluded to this in a comment as well. But I'm not sure who sees what pending where one posts!

I was so excited to find this solution yesterday. And it was all working when I set it up last night using @peter_kavalsky 's solution. But today, having touched nothing, it's stopped working.

I was able to play around a bit and got it back to sort of working. The lightbox with text pops up now. But upon clicking on it, it automatically sends me back to the top of the page. That wasn't happening yesterday.

I'm using Pacific theme. Same as @egrace . I've updated to the newest version of featherlight (and also tried old versions.) My site code injection looks like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.5/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//code.jquery.com/jquery-latest.js"></script><script src="//cdn.rawgit.com/noelboss/featherlight/1.7.5/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

And the page I'm struggling with is www.sandlotsportsnyc.com/register

Any help would be so immensely appreciated...because as the url implies - we're opening up registration Monday! And would hate this to be broken! Thanks so much community.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.