Gallery Section Lightbox Caption

#A. Install Code

#1. First, you need to download these files.

#2. Upload both to your site. If you don’t know how to upload files, follow these steps

#2.1. Click Plus icon in Not Linked

#2.2. Choose Link

#2.3. At URL > Choose File

#2.4. Click Upload icon and upload both files

#3. Paste this code into Code Injection > Footer

<!-- Gallery Lightbox Caption -->
<style>
:root {
  	--lightbox-caption-position-top: 3vh;
    --lightbox-caption-position-bottom: auto;
    --lightbox-caption-position-left: 24px;
    --lightbox-caption-position-right: auto;
  }
</style>
<link href="/s/plugin-lightbox.css" rel="stylesheet">
<script src="/s/plugin-lightbox.js"></script>
<script>pluginLightbox({"replaceGalleryLightbox":"true"});</script>
<style>
.fancybox-bg{background-color:rgb(251 246 232 / .9)!important}.fancybox-button--arrow_left svg,.fancybox-button--arrow_right svg{fill:#000!important}.fancybox-button svg{fill:#000!important}.fancybox-button:hover svg{fill:#000!important}.c-lightbox__caption h3{color:#000!important}.c-lightbox__caption p{font-family:"signifier",serif;font-size:20px!important;line-height:24px!important;letter-spacing:.01em!important;color:#000!important;text-align:left!important}.c-lightbox__caption strong{font-size:20px!important}.fancybox-caption a,.fancybox-caption a:link{color:#000!important;text-decoration:none!important;font-family:"Josefin Sans";font-size:12px!important;line-height:50px!important;letter-spacing:.1em;text-transform:uppercase}.fancybox-caption a,.fancybox-caption a:link:hover{color:#ca9240!important}@media screen and (min-width:768px){.c-lightbox__caption{position:absolute!important;top:var(--lightbox-caption-position-top);left:var(--lightbox-caption-position-left);right:var(--lightbox-caption-position-right);bottom:var(--lightbox-caption-position-bottom);max-width:400px;width:auto;background:none;padding:0;margin:0;z-index:10000001!important;pointer-events:none;text-align:left}}.c-lightbox__nav-dots button{display:none!important}.fancybox-slide--image{padding:6vh 12vw 6vh 12vw!important}.fancybox-caption--separate{margin-top:0!important}.fancybox-caption{padding:0 24px 24px!important}@media screen and (max-width:768px){.c-lightbox__caption{top:.5vh!important;left:0vh;padding:0;margin:0}.fancybox-caption{padding:0 0 0 2vh}.fancybox-slide--image{padding:0vh 2vh 0vh 2vh!important}}div.fancybox-caption h4{text-align: left;font-weight:600;font-size:18px;color:#494949;margin-bottom:10px}div.fancybox-caption p{font-size:14px!important;color:#494949;font-family:var(--body-font-font-family);font-style:var(--body-font-font-style);font-weight:var(--body-font-font-weight);line-height:var(--body-font-line-height);letter-spacing:var(--body-font-letter-spacing);text-transform:var(--body-font-text-transform)}
</style>
<script>
document.addEventListener("DOMContentLoaded",(function(){setTimeout((function(){document.querySelectorAll(".gallery-grid-item").forEach((function(t){const e=t.querySelector("a[data-fancybox]");if(!e)return;const n=t.querySelector(".gallery-caption-wrapper");if(!n)return;const r=n.innerHTML.trim();r&&e.setAttribute("data-caption",r)}))}),500)}));
</script>
<!-- end Gallery Lightbox Caption -->

#4. Make sure you enabled Caption

and you added Caption to Gallery Images. You can use raw text or use HTML format.

#B. Customize

#1. To change position of Caption to BOTTOM LEFT, you can adjust these lines

:root {
  	--lightbox-caption-position-top: 3vh;
    --lightbox-caption-position-bottom: auto;
    --lightbox-caption-position-left: 24px;
    --lightbox-caption-position-right: auto;
  }

to these lines

:root {
  	--lightbox-caption-position-top: auto;
    --lightbox-caption-position-bottom: 3vw;
    --lightbox-caption-position-left: 24px;
    --lightbox-caption-position-right: auto;
  }

#2. To move Caption under Images

Add this under main code

<style>
div.fancybox-content {
    margin-bottom: 10vw !important;
}
.c-lightbox__caption {
    top: unset !important;
    --lightbox-caption-position-bottom: 1vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
}
</style>