Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Button That Pops a Text Lightbox?


anacariniseiford

Question

Recommended Posts

  • 0

Oh, and if maybe the problem is with what I have in the actual button code block text, here's how that looks:


 <div class="sqs-block button-block sqs-block-button">
  <a href="#" data-featherlight="#tuesdayues" class="sqs-block-button-element--medium sqs-block-button-element">Tuesday Uptown: Laid Back - Soft "No-Sting" rubber Balls</a>
</div>

<div style="display:none;">
  <div id="tuesdayues">
    <p>     <p>
<strong>When:</strong> COMING SOON: TBD - NOT YET OPEN
    </p><ul>
    <li>NYC's only "No-Sting" rubber ball league
<li>NYC's classic format for years.  Sign up solo or in small groups together and we make the teams out of that.  That’s what makes this league special and popular:</li>
<li>Great for newbies/if you suck/vets – every team will have a mix of all, so you’re good!</li>
<li>Teams are made even so everyone’s got a chance each week</li>
<li>Every season we pair different friend groups together so there are never any cliques.  Everyone meets everyone.  Which is why it’s become the best sports <i>community</i> in NYC - instead of just 10 team cliques by themselves</li>
<br /><a href=""><img data-node-image="https://powr.s3.amazonaws.com/app_images%2Fresizable%2F9aa487dd-3a9f-4fb5-819e-00d227fc5926%2FCapturFiles_62.png" src="https://powr.s3.amazonaws.com/app_images%2Fresizable%2F9aa487dd-3a9f-4fb5-819e-00d227fc5926%2FCapturFiles_62.png" width="55" height="23" /></a></li>
</ul></p>
  </div>
</div>

alt text

THANK YOU with big passionate enthusiastic capital letters!

screen-shot-2017-05-13-at-125216-am.png.5cee56690239f8089d7078e7edb77050.png

Link to comment
  • 0

Thanks KenUnfortunately that didn't do it. Those hrefs are just links WITHIN the popped out lightbox (when you click on the "register" button inside the lightbox - in the screenshot above - it takes you to that link). I have 4 buttons on that page. 2 of my buttons didn't have defined links yet like you pointed out. 2 of them do. But all 4 of them when clicking on the button send you to the top of the page. I'm not even clicking on the "register" icon IN the lightbox text relevant to the href. I put links in the href anyway though to test your suggestion - all of them send me to top

Link to comment
  • 0

@SandlotSportsNYC

I looked at the source code and there isn't any Featherlight files or jQuery file which is required for these pop-ups. You can check out my Blog article that describes this Popup in better detail - https://www.kensdesigns.com/articles/squarespace-create-lightbox

I did re-create your buttons & popups on my Test Site using the Pacific theme and they work perfect - https://kensdesigns-testing1.squarespace.com/. In your code, there's some minor code issues but should still work once you add the Featherlight files & jQuery file.

Link to comment
  • 0

Ah. Bad timing @kenwestphal . At the time you replied, I intentionally had removed the code for the moment so I could play with it on a test page. It's back in there now. But looking around at your page...I don't know if this makes me feel better or worse...but looks like it's not just my page.On your example (nice costanza!) https://www.kensdesigns.com/examples/featherlight#

If you scroll down that page so you're not already at the top, and then click the "learn about george" button...that's ALSO jumping you back to the top of the page. Can you see what I'm saying there?

Edited by SandlotSportsNYC
Initial Revision
Link to comment
  • 0

@kenwestphal I just fixed the jumping-to-the-top-of-the-page-upon-clicking-the-button issue. At least for now. At least for my page (Pacific theme).

I was able to find this article:http://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page-in-jquery

Instead the code block for the button being


<a href="#" data-featherlight="#[WHATEVER YOU NAME IT]" class="sqs-block-button-element--medium sqs-block-button-element">[WHATEVER YOU WANT TO DISPLAY]</a>

Just add a

/

after the first

#

Making it


    <a href="#/" data-featherlight="#[WHATEVER YOU NAME IT]" class="sqs-block-button-element--medium sqs-block-button-element">[WHATEVER YOU WANT TO DISPLAY]</a>

I'm not good enough at coding to fully understand why this stops it from jumping. But it does the job it seems. Hope this helps someone else!

Edited by SandlotSportsNYC
Initial Revision
Link to comment
  • 0

@kenwestphal, you're amazing - as are all of you commenting on this thread.

If it helps any one else, I'm using Harris template and am only using 2 pages: a "home" page and a "references" page. (K.I.S.S., at least for me.) Placing the Step 1 code on the REFERENCES page (so, Gear Icon > Advanced > "Page Header Code Injection") was inconsistent (had the page jumping and the same redirecting to the HOME page issue described below.)

But when I tried placing the Step 1 code in the Page Header Code Injection of the HOME page it's working great now! Just FYI for everybody.

My question: can

Link to comment
  • 0

@kenwestphal (continued from comment above)

My question: can you add a link inside the lightbox to close the current lightbox and open the next?

I have 5 references on my page. Rather than click a name to read a quote, then close the lightbox to then click another link to read the next quote, a "NEXT" button inside the lightbox would be great.

The same code from Step 3 WILL open the next lightbox, but it doesn't close the original lightbox.

Total newbie; guess we'd need a function to, on click, close the current and open the next lightbox? Both Next and Previous would be cool but it's the NEXT that's key. Thx!!!

Link to comment
  • 0

@facetcounter nice thinking outside the box! I used a "Section" field as it comes with a header and text. Here's some further code to help make the popup look nicer and the text larger:


.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-inner-wrapper form {
margin-top: 10px;
}

.form-wrapper .field-list .section {
   font-size: 1.2em
}

.form-wrapper .field-list .description {
font-size: 16px;
}

alt text

Edited by usingmyhead
Initial Revision
Link to comment
  • 0

@anacariniseiford I'm interested in doing this text lightbox upon click of a single image (there are 2 single images on my page – not as gallery – and both require short bio). Can this css be modified to not be link or button, but on hover of image? or click of image?

Edited by ColeH_design
Initial Revision
Link to comment
  • 0

@ColeH_design

You can easily create a lightbox from clicking on an image. In my tutorial of a lightbox by clicking on text (https://www.spacetutorials.com/squarespace-lightbox/text), you would change the HTML code for the link to something like this:


<a href="#/" data-featherlight="#bio-john"><img src="https://www.mywebsite.com/john.jpg" alt="John Smith"></a>




Edited by kenwestphal
Initial Revision
Link to comment
  • 0
On 5/13/2017 at 6:45 AM, SandlotSportsNYC said:

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.

Hi, 

I hope the chat is still open in 2020 ! 

@SandlotSportsNYC I have the same issue. I followed all the step which are on @spacetutorials website https://www.spacetutorials.com/squarespace-lightbox/setup

It was perfectly working yesterday but now, not anymore...I try I think all your suggestions but I am still struggling. 
I have the hand, such as something can be opened but not lightbox... 😞 

I am using Brine template on Squarespace 7.0. 

This is the code I have on my website : 

Header : <link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" /></link>

Bottom of the page I want the lightbox : <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>

Either with the button option  <div class="sqs-block button-block sqs-block-button">
  <a href="" data-featherlight="#Nourissons" class="sqs-block-button-element--medium sqs-block-button-element">Nourissons</a>
</div>
<div style="display:none;">
<div id="Nourisson" style="text-align:center;">
<p>❇︎ Reflux Gastro-œsophagien (RGO) et régurgitations importantes<br />
❇︎ Coliques, diarrhées, constipations et troubles de la digestion<br />
❇︎ Troubles du sommeil, difficultés à faire ses nuits, etc<br />
❇︎ Troubles du comportement, hyper ou hyperactivité<br />
❇︎ Trouble ORL chroniques (otites, nez qui coule, bronchites, rhino…)<br />
❇︎ Torticolis, ainsi que toute asymétrie physique de tête (plagiocéphalie) ou du corps, etc.</p>
</div>
</div>

 

Or just a text : <a href="#/"data-featherlight="#femmesenceintes">Femmes Enceintes</a>
   <div style="display:none;">
<div id="femmesenceintes">
<p>
❇︎ Douleurs de dos, du coccyx
    <br />
❇︎ Sciatique, cruralgie et toute autre névralgie
    <br />
❇︎ Oppression thoracique, difficultés à respirer
    <br />
❇︎ Troubles circulaires
    <br />
❇︎ Insomnies, angoisse, fatigue et stress
    <br />
❇︎ Digestion difficile, nausées, vomissements, reflux, ballonnements, diarrhée, constipation
</p>
</div>
</div>
 

 

I would love to have some help !! 🙂 

Link to comment
  • 0
On 4/1/2016 at 8:35 AM, spacetutorials said:

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

Hello @spacetutorials, thank you so much for this code I was able to figure out the Lightbox and it comes up however I have problems with text appearing. I believe it appears in white color that's why I can not see it but I don't know how to change the color of the text. Could you help me with that, please?? Thank you, greatly appreciate it!

Link to comment
  • 0
On 3/24/2021 at 2:01 AM, berodesign said:

Hello @spacetutorials, thank you so much for this code I was able to figure out the Lightbox and it comes up however I have problems with text appearing. I believe it appears in white color that's why I can not see it but I don't know how to change the color of the text. Could you help me with that, please?? Thank you, greatly appreciate it!

Hi. Can you share link to page where you have problem? I think we can use some CSS to solve this

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • -1

@JessicaDevlin

You would put the Featherlight JavaScript & jQuery code into the Header for the Index. So in Squarespace, you would click the gear icon for the Index, click on the Advanced tab, and paste in the code below into the "Page Header Code Injection" section of the Index.

Then on the actual page where you want the links or buttons to be displayed, you would insert your HTML code onto that page using the Code Block.


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


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