Jump to content

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

Recommended Posts

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?

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Link to comment

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.

 

 

Dave Hart. Software/Technology Consultant living in London

Link to comment
  • 1 year later...

@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!

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...

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

image.png

Screen Shot 2023-01-27 at 10.07.57 AM.png

Edited by ChristinaSharp
Link to comment
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

image.png

Screen Shot 2023-01-27 at 10.07.57 AM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?"

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.17e1264faa8857103a12457a07b1b35f.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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! 

image.png

Edited by ChristinaSharp
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.