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>
<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="tlightbox-caption">' + text + '</div>');
})
})
</script>
<style>
.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;
}
</style>
Thanks for any help!