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
  • Created
  • Last Reply

Top Posters In This Topic

Can you share link to page where you use lightbox? We can check easier.

Also you can use this plugin to add lightbox, easy to install/customize without coding skills.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.