Jump to content

are caption breaks possible in lightbox?

Recommended Posts

I'm trying to style the captions for a client site. I used code injection to have captions show in lightbox only. I want to have a line break for image description under the title and date. Just found out line breaks aren't supported in captions. Is there a workaround?

This is my caption setup:

<span class="artworktitle">Stellar Stories</span>, 2021<br>
painted photo collage, 36 x 43 inches

So far the line break and span aren't working.

This is the code injection:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
        var text = $(this).find('img').attr("alt");
        $(this).append('<div class="tlightbox-caption">' + text + '</div>');
.tlightbox-caption {
    color: black;
    font-weight: normal;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -65px;
    z-index: 9999;
.gallery-lightbox-wrapper:hover {
	cursor: pointer;
.gallery-lightbox-item[data-in='false'] .tlightbox-caption {
	display: none!important;
.gallery-lightbox-item[data-active='true']:hover .tlightbox-caption{
	display: inline-block;
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .tlightbox-caption{
	display: inline-block;

Thanks for any help!

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.