Jump to content

Gallery Images with Captions only Viewable on Lightbbox Scroll

Recommended Posts

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>

Link to comment
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

image.thumb.png.b026f290bd3b2502b1f4638485483dca.png

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.