I've been reading new thread Lightbox captions only? And was going to try this new code.
But I used code from Brandon:
Code Injection>Footer:
<script>
/**
* Add descriptions/captions to galleries in Squarespace 7.1.
* JavaScript
* © @brandon (Squarespace Forum User)
* This software is provided "as is", without warranty of any kind, express or implied.
*/
document.addEventListener("DOMContentLoaded", function() {
addGalleryItemDescriptions(".gallery-lightbox");
function addGalleryItemDescriptions(gs, gdzs) {
var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs));
}
});
</script>
Custom CSS:
/**
* Add descriptions/captions to galleries in Squarespace 7.1.
* CSS
* © @brandon (Squarespace Forum User)
* This software is provided "as is", without warranty of any kind, express or implied.
*/
body {
width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
position: relative;
}
.gallery-item-description {
font-family: "Georgia", serif;
font-style: italic;
font-size: 16px;
line-height: 1.4em;
color: black;
}
.gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow {
.gallery-item-description {
position: absolute;
width: 100%;
bottom: 0;
background-color: rgba(255, 255, 255, 1);
padding: 2% 6%;
box-sizing: border-box;
}
}
.gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel {
.gallery-item-description {
padding: 10px 10px;
opacity: 1;
transition: opacity 0.2s;
}
.gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
.gallery-item-description {
opacity: 0;
}
}
}
.gallery-slideshow {
.gallery-slideshow-list {
position: static;
}
.gallery-slideshow-item-wrapper, .gallery-item-description {
flex: 1 1 auto;
}
}
.gallery-reel {
.gallery-item-description {
text-align: center;
left: 50%;
transform: translateX(-50%);
}
&[data-width="inset"], &[data-width="inset"] {
.gallery-item-description {
max-width: 88vw;
}
}
&[data-width="full-bleed"] {
.gallery-item-description {
max-width: 100vw;
}
}
}
.gallery-lightbox .gallery-item-description {
margin-top: 1em;
padding: 1em 1em;
background-color: rgba(234, 234, 234, 1);
transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
opacity: 0;
}