Jump to content

Lightbox Caption styling?

Recommended Posts

I'm working on a client site. I found code to display captions in the lightbox instead of in the gallery grid. My client wants the caption to be styled more. Is there a way to style the caption text? I tried CSS and tried to add line breaks, but it isn't working for me. I want the title to be bolded and on the top line, then the other info below. I attached a screenshot of an image in the lightbox. My client's site is still set to private. I've tried various CSS I've found online but it isn't working for the lightbox caption. Thanks for any tips!

I set up a SquareSpace trial site to test this.
password: gallerytest
URL: https://rectangle-poodle-8dp4.squarespace.com/gallery-1

Here's the code to get the gallery captions styled, it works until I have caption for lightbox only:

.gallery-caption p {white-space:pre; text-align:center !important}

.gallery-caption p:first-line {color: black; font-weight:bold !important}

 

Then I found and added this to get the captions to show in lightbox only (client request):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="lightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
.lightbox-caption {
    color: gray;
    font-weight: bold;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -65px;
    z-index: 9999;
}

  .lightbox-caption p {
    white-space:pre;
    font-weight: normal!important;
    text-align:center!important;
  }
  
.gallery-lightbox-wrapper:hover {
    cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
    display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
    display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
    display: inline-block;
}
  .gallery-lightbox .lightbox-caption {
    display: block !important;
}
  .gallery-caption p.gallery-caption-content {
    display: none !important;
}
</style>

Screen Shot 2023-03-14 at 8.05.48 PM.png

Screen Shot 2023-03-14 at 8.07.46 PM.png

In the gallery, the caption has a soft return after the title

Screen Shot 2023-03-14 at 8.25.54 PM.png

Edited by LA-Design
more info
Link to comment
  • Replies 12
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Thanks, I removed that code from the 'code injection' area. Should I also removed this from the 'Custom CSS' area?

.gallery-caption p {white-space:pre; text-align:center !important}

.gallery-caption p:first-line {color: black; font-weight:bold !important}

Thank you!

Link to comment
  • 6 months later...
On 9/26/2023 at 8:39 AM, LorenAK said:

Hi again, I noticed that these captions (in lightbox mode) get cut off when viewing on a phone. 

https://www.janiceweingrod.com/moments-in-time

https://www.lannyweingrod.com/fictional-characters

Any way to fix this? Thanks!

First, to make break line, you can use this br tag in caption

caption <br/>
caption line 2

Next, to add caption in lightbox, use this new code

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/28/2023 at 9:31 AM, LorenAK said:

Great, thank you for this, I added the new code to the footer code injection.
I deleted the old lightbox code from the header area of the code injection.
Now no captions are showing. Should I have left the old code there?

https://www.janiceweingrod.com/moments-in-time

I see it shows fine here

image.thumb.png.e729a98a6b4bb1b2612f586f9eb1ed71.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.