Site URL: https://www.sweetonmaui.com/
Aloha!
I've been reading lots of posts on the editing captions for gallery light boxes, but can't seem to implement the right pieces to get the effect I'm looking for.
My goal is to share photo credits where I need to, but in a subtle way. I thought it would be great to have them appear in the lightbox, so the thumbnail on the gallery page looks clean. I found a piece of code that works to show the caption in the lightbox only, but I don't know enough to then edit it. (see code at the end of the post).
My site is www.sweetonmaui.com.
Click on Gallery > Dessert Gallery to see the example.
First photo of yellow cups - when you click on the lightbox the caption (image description) appears, but not formatted the way I would like.
I'm thinking of a couple of options but not sure yet and hoping to be able to see them on the screen:
Option 1
- centered text
- bar same width as photo and align to bottom edge of photo
- smaller font, lower weight font - large enough to read, but small enough to not detract. In other places on my site I've formatted Paragraph 4 to use for photo credits - would be fine to use here too.
Option 2
- centered text below photo, in the dark gray color in my palette (no background)
- smaller font, lower weight font - large enough to read, but small enough to not detract. In other places on my site I've formatted Paragraph 4 to use for photo credits - would be fine to use here too.
Thanks so much in advance!!!
This is the code I'm using:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
function createNodeCaption(textContent){
var divElement = document.createElement("div");
var pElement = document.createElement("p");
pElement.innerHTML = textContent;
divElement.classList.add("style-gallery-lightbox-text");
divElement.appendChild(pElement);
return divElement;
}
$( document ).ready(function() {
var itemGallery = document.getElementsByClassName('gallery-grid-item');
var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item');
var countGalleryItem = itemGallery.length;
for(var i = 0; i < countGalleryItem; i++){
if(itemGallery.getElementsByTagName('p').length != 0){
var text = itemGallery.getElementsByTagName('p')[0].textContent;
var itemNeedCaption = itemGalleryLightBox.getElementsByClassName('gallery-lightbox-item-src')[0];
itemNeedCaption.appendChild(createNodeCaption(text));
}
}
});
</script>
<style>
figcaption.gallery-caption.gallery-caption-grid-simple {
display: none;
}
.style-gallery-lightbox-text {
padding: 10px 0px 25px 0px;
display: block;
position: absolute;
left: 50%;
top: 90%;
width: 100%;
transform: translate(-50%, -50%);
font-size: .3em
text-align: center;
}
.style-gallery-lightbox-text p {
width: 90%;
padding: 10px 15px;
margin: auto;
color: white;
background-color: rgba(0,0,0,0.5);
}
@media screen and (max-width:767px) {
.style-gallery-lightbox-text {
top: 70%;
}
}
</style>
