How to make image captions in gallery show up only in lightbox under image?

Site URL: https://www.sarahbergeronartist.com/paintings

I am using the masonry gallery on a number of pages on my website https://www.sarahbergeronartist.com/paintings.

I would like to find a way to have all image captions show up ONLY in lightbox - centered under the image - and not show the captions in the gallery view. I'm using version 7.1 and I have the most basic squarespace plan, if that is relevant.

Can someone help me do this?

21 minutes ago, SarahBergeronArtist said:

Site URL: https://www.sarahbergeronartist.com/paintings

I am using the masonry gallery on a number of pages on my website https://www.sarahbergeronartist.com/paintings.

I would like to find a way to have all image captions show up ONLY in lightbox - centered under the image - and not show the captions in the gallery view. I'm using version 7.1 and I have the most basic squarespace plan, if that is relevant.

Can someone help me do this?

it may require some javascript to move the caption to lightbox, so business plan or higher is needed

On 11/24/2021 at 6:49 PM, bangank36 said:

it may require some javascript to move the caption to lightbox, so business plan or higher is needed

Is there no way to do it with code without upgrading to business?

On 11/26/2021 at 12:42 PM, SarahBergeronArtist said:

Is there no way to do it with code without upgrading to business?

With Personal Plan, 1 image = 1 code to achieve this. If you still want this, we can check & give the code

With Business Plan or higher, 1 code for all images, If you intend to updgrade, we can check & give the code

On 11/24/2021 at 6:49 PM, bangank36 said:

it may require some javascript to move the caption to lightbox, so business plan or higher is needed

I have upgraded to business plan, but I still am not able to find a way to achieve this. Any suggestions?

13 hours ago, tuanphan said:

With Personal Plan, 1 image = 1 code to achieve this. If you still want this, we can check & give the code

With Business Plan or higher, 1 code for all images, If you intend to updgrade, we can check & give the code

Okay, I upgraded to business to simplify. Can you tell me what code I would use to achieve this and were I insert it?

you could try something like this:

• Go to the settings of your paintings page by clicking the cog icon to the right of it in the pages list
• Click on Advanced and then in the "Page Header Code Injection" paste the code as follows

<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:0;
  color:white;
  text-align:center;
  width:100%;
}
</style>

The script bit at the top finds any captions that you've created and creates a copy that it appends to the relevant slide in the lightbox. When it creates that copy it assigns a class called "lightbox-caption" that you can use to style the captions. This code should work in the three grid modes of simple, masonry and strips.

The style section beneath the script does two things:

• firstly it hides the caption in the masonry view (as you requested, but you can remove that if you want). You should leave Captions selected in the options though as they need to be there for the script to find them
• The second bit styles the lightbox caption. at the moment it centres them at the bottom of the photo, with white text overlaying the painting. you can tweak those settings depending on how you want the caption to look

Try it out, see how you get on.

@iamdavehart

I realise this is from a while back but I have just used this code - thank you so much, it worked! After so long of looking, I'm very grateful for this!

The only thing is, there is a slight 1 second delay on the captions when transitioning between images in lightbox mode. In those instances the text is overlaid for a moment and looks a bit messy. Is there anything I can tweak to avoid this?

Link

Thank you!

You can try adding to Home > Design > Custom Css

.gallery-lightbox-item[data-active='true'] {
  visibility: hidden;
}

.gallery-lightbox-item[data-active="true"] {
  opacity: 0 ; 
}

.gallery-lightbox-item[data-in='true'] {
  visibility: visible ;
}

.gallery-lightbox-item[data-in="true"] {
  opacity: 1 ; 
}

Support me by pressing 👍  or marking as solution if this useful for you

Both the injection code and custom css worked for me. I tweaked the injection code a little because I needed the captions visible both in the gallery and lightbox. Unfortunately, the code injection seems to cause issues with my squarespace editor? Maybe squarespace is having connectivity issues, but the editor should look like the first image, not the second image (attached)

The issue I'm running into now is the styling of the lightbox text. I'd like the caption to be just under the image, not overlapping on the bottom. I set the bottom to -100 but then it gets cut off on mobile. Any suggestions?

page: https://deyvaarthurtest.squarespace.com/photographyprojects/egypt-everyday
pass: Deyva1234

18 hours ago, ChristinaSharp said:

Both the injection code and custom css worked for me. I tweaked the injection code a little because I needed the captions visible both in the gallery and lightbox. Unfortunately, the code injection seems to cause issues with my squarespace editor? Maybe squarespace is having connectivity issues, but the editor should look like the first image, not the second image (attached)

The issue I'm running into now is the styling of the lightbox text. I'd like the caption to be just under the image, not overlapping on the bottom. I set the bottom to -100 but then it gets cut off on mobile. Any suggestions?

page: https://deyvaarthurtest.squarespace.com/photographyprojects/egypt-everyday
pass: Deyva1234

You try checking it again. I have had this problem some times, even using no code

Yeah, it works now. Must be some kind of bug in Squarespace I guess.

Any thoughts on the styling issue I mentioned? 

"The issue I'm running into now is the styling of the lightbox text. I'd like the caption to be just under the image, not overlapping on the bottom. I set the bottom to -100 but then it gets cut off on mobile. Any suggestions?"

21 hours ago, ChristinaSharp said:

Yeah, it works now. Must be some kind of bug in Squarespace I guess.

Any thoughts on the styling issue I mentioned? 

"The issue I'm running into now is the styling of the lightbox text. I'd like the caption to be just under the image, not overlapping on the bottom. I set the bottom to -100 but then it gets cut off on mobile. Any suggestions?"

You can add the following code for mobile display

@media only screen and (max-width: 767px) {
  figcaption.lightbox-caption {
    line-height: 1.5;
    font-size: 10px !important;
  }
}

Press 👍 or mark this answer as solution to help another one too

My testing

Yeah, I since removed some of the code so mobile isn't the issue anymore. The biggest issue is how it's looking on laptop or larger screens. Edit: Client ultimately decided to not do captions in the Lightbox so because it was causing issues and using up time. Wish Squarespace would build this option in!