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

  • Answers 47
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

If anyone has much simpler needs, I found a way to do a really simple text box popup with a title, subheading and basic text area by hacking the built in form. Don't use it on a page that needs forms

Posted Images

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 post
  • 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 post
  • 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 post
  • 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 post
  • 0

@SandlotSportsNYC

It's working fine for me. What browser are you using & what version? I've tested it on the latest version of Chrome, Firefox v53, and also Microsoft Edge.

Edited by kenwestphal
Initial Revision
Link to post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 0
Guest

where does the above go in relation to :

Learn about John


 <p>Insert bio here</p>




Link to post
  • 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 post
  • 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 post
  • 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 post
  • -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 post

Create an account or sign in to comment

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


×
×
  • Create New...