Jump to content

Custom script and Css with lightboxes

Recommended Posts

I'm designing a site as part of a team for a school magazine, and I work on a PC, whereas my co-designers work on Macs. I designed a page that has an image that, when clicked, presents a lightbox with all text. On my side, the lightbox looks like this
1933905821_Lightboxcorrect.thumb.png.c4b6a41799ec86422f90474b9ad98ee9.png

On my co-designer's Mac, the lightbox looks like this:

1109629633_ScreenShot2020-12-08at10_36_57AM.thumb.png.b4973e53ce49aacb9f0de9739b6baccb.png

This is the script that I added to the button, which when clicked, presents the lightbox:

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

<a href="#/" data-featherlight="#bio-jordan"><img src="https://static1.squarespace.com/static/5fab03d92e78326e8a6b511f/5fbc085249133c14d6cc24f1/5fbc087ecd07790e0b614af1/1606156785940/X+Small.png?format=100w" alt="X Icon"></a>

<div style="display:none;">
<div id="bio-jordan">
<p>Seems like you decided to swipe left on Jordan... Here’s what you would’ve missed!
  </p>
  <p>
Phew! You're lucky to have missed out on a yogurt date where your date talked about how you sort-of-kind-of-not looked like her best friend that she had a crush on. Shhh. It's a secret. Also, you would've gotten pretty "cozy" after she would've told you about her steamy time hooking up with a random guy in a van in the middle of a corn field.
</p>
</div>
</div>

And this is the CSS that's injected into the page header:

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

<style>
.featherlight:last-of-type{
  background:rgba(215, 23, 49,1);
  color: #000000;}
  
 .squarespace-columns * {
    box-sizing: border-box;
}

.column {
    float: left;
    width: 33.33%;
  padding: 10px;}

.row:after {
    content: "";
    display: table;
    clear: both;

</style>

We also checked to make sure that it wasn't a browser issue. The same problem happens when viewed on a Mac in Chrome, Safari, or Firefox.

Link to comment
  • Replies 3
  • Views 995
  • Created
  • Last Reply

Thank you for your response! I cannot provide a link, as the site is not live yet. Since it's provided by the school, it's also password protected with our school email accounts. We are looking to code any customization on the site, as opposed to buying plugins.

Link to comment

Archived

This topic is now archived and is closed to further replies.

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