spacetutorials

@ColeH_design

I'm not sure. I have a tutorial on changing the background color from white of the page when a lightbox appears but I haven't come across any documentation for changing the color of the actual lightbox itself.

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

Glad to hear you found a fix and thanks for sharing!

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

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

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

@SandlotSportsNYC

The issue is your link doesn't contain a website URL. Since it is missing, it's going to jump to the top of the page. See below for this:

Hi @etheo,

In STEP 1, you may need to include the following code to add jQuery

<script src="//code.jquery.com/jquery-latest.js"></script>

Here is my blog article where I go more in depth about this feature with a link to an example - link text

@Lot71Sorry for late delay in response. I would have you remove the code for "max-width:1200px !important;" since the lightbox should scale accordingly since it does for me on my website where I use them. I don't have any code for my lightboxes in regards to height or width and they fit fine with images & a picture. However, you should be able to add "width:80%;" to the .sqs-lightbox-slide part of your Custom CSS code and that should reduce the width.

If you are able to provide a link to the webpage or a screenshot of the webpage, it may help if the above info doesn't.

@Lot71

I will say seeing the actual webpage will be easier to troubleshoot your issue. However, since the Images are clickable, you can verify that the "Lightbox" is unchecked and there is no "Clickthrough URL" for the link.

HI @Lot71

You can use this code:

<div style="text-align:center;">
Learn About Joe
</div>

@Peter_Kovalsky

Thanks for posting your update.

FYI - Since this solution worked for me, I decided to post it for this person to try to see if it would work for them. As a Squarespace user and a new Community/Answers member, I want to contribute to try to help others out there since this area has helped me when I had questions. While I don't know everything, I try to contribute to areas I can and learn from others.

KCCO

Hi @neilrolnick

From @Peter_Kovalsky comment above, it appears that for some users, you may need to replace the code I have for Step 1 with the updated version of Featherlight to get it to work. Try the code below to see if that works for you.

You are correct - all the code goes into the same page (ex. Bio page). You are also correct that the content of the Lightbox would go where I have "Insert bio text here"

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

@anacariniseiford Hopefully the answer I provided gives you want you want.

STEP 1

For the page you want to have the Lightbox on (ex. Bio page), click the gear icon for that page’s settings, then click the Advanced tab. Paste the code below into the page header code injection box:

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

STEP 2

On your Bio page, add a “Code” block and paste in the code below. This is the Lightbox that appears with that person’s bio information. You can style this more with CSS as well as include an image if you want, the code below is just for bio text.

<div style="display:none;">
<div id="bio-john">
<p>
 Insert the bio text here
</p>
 </div>
 </div>

STEP 3

On your Bio page, add a “Code” block and paste in the code below. This is to create a link to the Lightbox that will appear when you click on that person's bio (ex. Learn more about John Smith).

<a href="#" data-featherlight="#bio-john">Learn About John</a>

If I wanted to make that link a button instead of a text link, I would use the code below

<div class="sqs-block button-block sqs-block-button">
 <a href="#" data-featherlight="#bio-john" class="sqs-block-button-element--medium sqs-block-button-element">Learn About John</a>
</div>

If you are going to have multiple bio’s, then you would repeat step 2 & step 3, but would replace “bio-john” with the next person / something different (ex. bio-jack )