Showing captions beneath an image in a lightbox only and not showing in the gallery.

Site URL: https://sheep-sparrow-jj63.squarespace.com/

Hi everyone,

Looking for a solution to showing the captions of the images only when they are in a lightbox - I want the caption to show beneath the image. I've tried a number of similar solutions asked by others previously but to no avail.

https://sheep-sparrow-jj63.squarespace.com/

Password - annabubba

Many thanks,

Yva

i've now got it to work using a code i found on another query but that is only when the images are in a 'simple' grid - I'd like it to work for a masonry grid.

Many thanks in advance,

Yva

https://forum.squarespace.com/topic/164356-lightbox-captions-only/page/2/

<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[i].getElementsByTagName('p').length != 0){
			var text = itemGallery[i].getElementsByTagName('p')[0].textContent;
			var itemNeedCaption = itemGalleryLightBox[i].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: left;
}

.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>

Hi. I think I posted above code.

Have you solved this with masonry yet?

Hi tuanphan,

I'm having the same problem.

It only works for Simple Gallery, not Masonry.

Any ideas?

Thanks

12 hours ago, Seblaise said:

Hi tuanphan,

I'm having the same problem.

It only works for Simple Gallery, not Masonry.

Any ideas?

Thanks

Can you share link to page where you use Masonry?