Button That Pops a Text Lightbox?

Hello there,

Would like to add a button that when clicked, a text lightbox would pop. Any suggestion? Thanks a lot!

Ana

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

STEP 1

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>

STEP 2

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">
<p>
 Insert the bio text here
</p>
 </div>
 </div>

STEP 3

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>
</div>

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 )

@kenwestphal this does not work for me. elmhurstbaptist.com/retreat-2016

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.

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?

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>

@Peter_Kovalsky

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.

KCCO

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>
 </div>
</div>

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!

This is great! Thank you everyone!

Next step: does anyone know how to format the font in the lightbox to match the rest of the body text on the site? I would be forever grateful for help on this.

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>
  </div>
  </div>
<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;
}

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.

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

HI @Lot71

You can use this code:

<div style="text-align:center;">
Learn About Joe
</div>

@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!

@Lot71

I will say seeing the actual webpage will be easier to troubleshoot your issue. However, since the Images are clickable, you can verify that the "Lightbox" is unchecked and there is no "Clickthrough URL" for the link.

@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.

@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;}

Thanks!

@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.

@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!

Hi @etheo,

In STEP 1, you may need to include the following code to add jQuery

<script src="//code.jquery.com/jquery-latest.js"></script>

Here is my blog article where I go more in depth about this feature with a link to an example - link text

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!

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.

hi egrace!

Ok I'm using the Pacific template as well and can't figure this out.Where are you putting the header code? in the gear for that index? in the code block on that index?

much appreaciated!

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!

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.