site: https://www.charlielasansky.com/90s-drawings
Hi there - I have successfully used this code injection to add captions to the lightbox only. Thank you!
I wanted to make 2 changes and I am unable to figure out how to do it, any help would be much appreciated @tuanphan and @creedon
1) I was hoping to make the captions display automatically in the lightbox, not just on :hover, but so they load with the image and there is no need to :hover
2) Is it possible to make the captions sit directly under the image, or be relative to the image? On mobile, the captions are at the bottom of the screen.
Here is the code I am using:
<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: #656565;
margin: 10px 0;
text-align: center;
display: none;
position: absolute;
bottom: -45px;
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>
Again - thank you for any help!
Amadeo