Gallery Images with Captions only Viewable on Lightbbox Scroll

Hi,

I am a painter currently switching over my website platform from Show.it to Squarespace. I really appreciated Show.it for it's drag and drop website features making anything I had in mind customizable, but chose to switch to Squarespace for the friendlier e-commerce. 

I am having trouble achieving what I'd like to do with my gallery portfolio. I like the gallery grid view and want to feature captions, but only have the captions appear when you click on the image in the Lightbox view. I found a solution to my own problem from a forum where a user provided helpful code to inject in the CSS. The other night, I did this and thought I solved the problem. When I returned to my website a couple days later, It was gone. It wouldn't fix even when I went through the same steps of adding this code back in. 

I hope this makes sense, and if anyone can help in this situation, I would be extremely grateful. 

here is my website will be transferring from Show.it and here is my Squarespace website I am currently working  on. 

I will attach the code I was working from in case that is helpful:

<script>

  document.addEventListener("DOMContentLoaded", function () {

    // configure the classes we're looking for

    const listClass = "div.gallery figure";

    const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a";

    const lightBoxCaption = "lightbox-caption";

    const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']"

    // select all gallery elements, find their captions

    // if they exist then extract the slide id and add a new caption element

    // to the lightbox slide

    const n = document.querySelectorAll(listClass);

    for (var i = 0; i < n.length; i++) {

      const a = n[i].querySelector(linkClass);

      const c = n[i].querySelector("figcaption");

      if (a && a.href && c) {

        const id = a.href.split("=")[1];

        const lbSelector = lightboxSlideSelector.replace("{0}",id);

        const lb = document.querySelector(lbSelector);

        const cp = document.createElement("figcaption");

        cp.className = lightBoxCaption;

        cp.innerHTML = c.innerHTML;

        lb.appendChild(cp);

      }

    }

  });

</script>

<style>

figcaption.gallery-caption {

  display:none;

}

figcaption.lightbox-caption {

  position:absolute;

  bottom:-80px;

  color:#5F5F5F;

  text-align:center;

  width:100%;

  padding-bottom: 10px;

}

</style>

Your site is private, we can't access it.

You can follow this to share url

On 4/10/2024 at 3:42 AM, alexislitsch said:

Hi,

I am a painter currently switching over my website platform from Show.it to Squarespace. I really appreciated Show.it for it's drag and drop website features making anything I had in mind customizable, but chose to switch to Squarespace for the friendlier e-commerce. 

I am having trouble achieving what I'd like to do with my gallery portfolio. I like the gallery grid view and want to feature captions, but only have the captions appear when you click on the image in the Lightbox view. I found a solution to my own problem from a forum where a user provided helpful code to inject in the CSS. The other night, I did this and thought I solved the problem. When I returned to my website a couple days later, It was gone. It wouldn't fix even when I went through the same steps of adding this code back in. 

I hope this makes sense, and if anyone can help in this situation, I would be extremely grateful. 

here is my website will be transferring from Show.it and here is my Squarespace website I am currently working  on. 

I will attach the code I was working from in case that is helpful:

<script>

  document.addEventListener("DOMContentLoaded", function () {

    // configure the classes we're looking for

    const listClass = "div.gallery figure";

    const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a";

    const lightBoxCaption = "lightbox-caption";

    const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']"

    // select all gallery elements, find their captions

    // if they exist then extract the slide id and add a new caption element

    // to the lightbox slide

    const n = document.querySelectorAll(listClass);

    for (var i = 0; i < n.length; i++) {

      const a = n[i].querySelector(linkClass);

      const c = n[i].querySelector("figcaption");

      if (a && a.href && c) {

        const id = a.href.split("=")[1];

        const lbSelector = lightboxSlideSelector.replace("{0}",id);

        const lb = document.querySelector(lbSelector);

        const cp = document.createElement("figcaption");

        cp.className = lightBoxCaption;

        cp.innerHTML = c.innerHTML;

        lb.appendChild(cp);

      }

    }

  });

</script>

<style>

figcaption.gallery-caption {

  display:none;

}

figcaption.lightbox-caption {

  position:absolute;

  bottom:-80px;

  color:#5F5F5F;

  text-align:center;

  width:100%;

  padding-bottom: 10px;

}

</style>

Looks like you solved it

Btw: here is the dedicated playground url for your site with lightbox studio on 

PREVIEW