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>
In the gallery, the caption has a soft return after the title
tuanphan reacted to a post in a topic:
Lightbox Caption styling?
