Jump to content

[SOLVED] Pop-up lightbox text help

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://tarantula-porcupine-bkrr.squarespace.com/

Right now I'm using this code injection in the header:

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

And this code in the code block:

<a href="#" data-featherlight="#popPK-service">

<h2>

  Population pharmacokinetics </h2>

<p2>

Any more info here</p2>

</h2> <div style="display:none;">

<div id="popPK-service">

<h2 style="font-size:36px;">

Population Pharmacokinetics

</h2>

<p style="font-size:18px;">

 • Derivation of pooled analysis-ready datasets and exploratory tabular and graphical analysis

</p>

  </div>

  </div>

 

However, only three of the five pop-ups work, with the remaining two opening a small, empty square. Is this a problem with the code injection? Any help would be greatly appreciated.

Site: https://tarantula-porcupine-bkrr.squarespace.com/

Password is 1234

Thanks!

Edited by dl_23
Adding site title and password
Link to comment
19 hours ago, dl_23 said:

Site URL: https://tarantula-porcupine-bkrr.squarespace.com/

Right now I'm using this code injection in the header:

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

And this code in the code block:

<a href="#" data-featherlight="#popPK-service">

<h2>

  Population pharmacokinetics </h2>

<p2>

Any more info here</p2>

</h2> <div style="display:none;">

<div id="popPK-service">

<h2 style="font-size:36px;">

Population Pharmacokinetics

</h2>

<p style="font-size:18px;">

 • Derivation of pooled analysis-ready datasets and exploratory tabular and graphical analysis

</p>

  </div>

  </div>

 

However, only three of the five pop-ups work, with the remaining two opening a small, empty square. Is this a problem with the code injection? Any help would be greatly appreciated.

Site: https://tarantula-porcupine-bkrr.squarespace.com/

Password is 1234

Thanks!

I checked those items, these are now accordion, did you solve this?

image.thumb.png.759b2ad1e8d49035499b0f446faf4f68.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution
17 hours ago, dl_23 said:

Hey @bangank36

Sorry, should have specified!

I'm trying out 2 options for different possible layouts. The lightboxes are on the "Specialties pop out" page.

remove the # in the id="#...", that error repeat on the last 2 block

image.png.cc402ef0e71950612c858457a1d2c90e.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • dl_23 changed the title to [SOLVED] Pop-up lightbox text help

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.