Featherlight Lightbox Troubleshooting

Site URL: https://pumpkin-pentagon-fmgr.squarespace.com/blk-101-nova-scotia

Hi guys, I've implemented a featherlight lightbox biography for my website. However, sections or elements below the lightbox area become interactive and those sections open a lightbox when there should be none opening up. Is there a problem with the coding? I've been having difficulty configuring how the lightbox coding. 

My current code looks like this:

Code Injection (Header and Footer):

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/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.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Code Block:

<a href="#" data-featherlight="#bio-Lindell">

<img src=imagelink</a>

<div style="display:none;">
<div id="bio-Lindell" style="text-align:center;">
<img src="Image link" width="300" height="300"/>
  <h3 style="text-align:left">Name</h3>
  <p style="text-align:left">Text</p>
</div>
</div>

Looking forward to see how to remedy this issue. My password for my site is 7412!

Hi,

What is access password?

2 minutes ago, tuanphan said:

Hi,

What is access password?

Hey tuanphan, the access password is 7412!

On 5/5/2022 at 9:21 PM, jcupian said:

Hey tuanphan, the access password is 7412!

Thank you. But password is incorrect

7412!

Hey! I'm having a similar issue with light boxes would you be able to explain how you fixed your issue? @jcupian @tuanphan

Site URL: https://sampsonlab.squarespace.com/meet-the-team

I am using a light box for my website's bios. However, the show up in the incorrect location after saving. They work correctly, but are not in the right place on the page. It works in some areas, but not in others, which I why I'm confused. Any advice or help is much appreciated!!

Here is the code I used:

Header

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

Footer

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Page

<div style="text-align:center; padding:0;">
<a href="#/" data-featherlight="#bio-name" class="sqs-block-button-element--medium sqs-block-button-element" style="background-color:#000; color:#fff; padding:20px 20px;">View Name's Bio</a>
</div>

<div style="display:none;">
<div id="bio-name" style="text-align:left;">
<img src="link for image" alt="Name" width="300" 
     height="376" style="float:left; padding:15px;" /> <br></br>
<h4>Name</h4>
<p>Title<br></br>
  
Bio <br></br>

<a href="link"target="_blank">Link Name</a> <br></br>
</p>
</div>
</div>

On 7/29/2022 at 2:06 AM, wave8756 said:

Site URL: https://sampsonlab.squarespace.com/meet-the-team

I am using a light box for my website's bios. However, the show up in the incorrect location after saving. They work correctly, but are not in the right place on the page. It works in some areas, but not in others, which I why I'm confused. Any advice or help is much appreciated!!

 

Here is the code I used:

Header

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

Footer

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Page

<div style="text-align:center; padding:0;">
<a href="#/" data-featherlight="#bio-name" class="sqs-block-button-element--medium sqs-block-button-element" style="background-color:#000; color:#fff; padding:20px 20px;">View Name's Bio</a>
</div>

<div style="display:none;">
<div id="bio-name" style="text-align:left;">
<img src="link for image" alt="Name" width="300" 
     height="376" style="float:left; padding:15px;" /> <br></br>
<h4>Name</h4>
<p>Title<br></br>
  
Bio <br></br>

<a href="link"target="_blank">Link Name</a> <br></br>
</p>
</div>
</div>

 

Hi. What is password?

@tuanphan the password is: password

On 8/1/2022 at 8:02 PM, wave8756 said:

@tuanphan the password is: password

Hi. The site is private

Hello! I am utilizing code I found here and github and unfortunately the text is not displaying in the lightbox. Can anyone help?  Thank you

Site: https://sagesage.squarespace.com/

Password: sage

On 2/3/2023 at 8:52 PM, laurenhauss said:

Hello! I am utilizing code I found here and github and unfortunately the text is not displaying in the lightbox. Can anyone help?  Thank you

Site: https://sagesage.squarespace.com/

Password: sage

 

Lightbox is fine to me. Windows/Chrome