LorenAK Posted September 25, 2023 Share Posted September 25, 2023 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! Link to comment
tuanphan Posted September 27, 2023 Share Posted September 27, 2023 Hi, You try use this new lightbox caption 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment