Jump to content

Hide caption on masonry gallery view, show on lightbox

Recommended Posts

I am attempting to set up a portfolio site that presents a masonry gallery without captions, but the captions appear when the lightbox is open. I also want the captions to be links.

I have partially achieved this by hiding captions on the masonry grid, and showing them on lightbox. The trouble I am having now is that the padding around the caption is making it un-clickable in some instances.

The caption in the screenshot "Caption Link Working" is acting as I would like - when you hover over the text "View Project," the mouse pointer changes to a cursor and a link address appears in the lower left.

However, the screenshot "Caption Link Not Working" shows an image of a different aspect ratio, which seems to break the link. 

I would appreciate any help you can give.

Caption Link Not Working.png

Caption Link Working.png

Link to comment
  • Replies 16
  • Views 2.9k
  • Created
  • Last Reply

Top Posters In This Topic

@sarahgracestudio ok it looks like the gallery controls (the left/right arrows) are interfering with the caption, they are absolutely positioned on top, so they cover the link which is why you can't click it.

I suggest adjusting the position of the left/right arrows to only come down 50% of the height instead of 100% and then positioning at the bottom of the flexbox. They may not be exactly half the height of the page, but it will be close enough visually and fix your interference. So add this to your custom CSS:

.gallery-lightbox-controls {
	height: 50% !important;
	align-items: flex-end;
}

Let me know?

Link to comment
  • 3 months later...
  • 2 weeks later...
  • 2 months later...

@tuanphan Can you help me too please?
I need to have image title show on Lightbox, underneath the image, but not on the masonry grid.
I would also like to have the controls say PREV / NEXT, underneath the title, instead of the standard arrow controls on the sides, is that possible?

Link to comment
On 6/16/2024 at 12:11 AM, VeeBee said:

@tuanphan Can you help me too please?
I need to have image title show on Lightbox, underneath the image, but not on the masonry grid.
I would also like to have the controls say PREV / NEXT, underneath the title, instead of the standard arrow controls on the sides, is that possible?

With caption in lightbox, use this code to Website Tools (under Not Linked) > Code Injection > Footer.

Then if it works, I will give code Prev/Next then.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script>
jQuery(document).ready(function($){
 var texts = document.getElementsByClassName('gallery-caption-content');
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){
        var text = texts[idx]
        var id = $(ele).attr('data-slide-url')
        if (text) {
            $(ele).append('<p id="' + id + '" class="light-caption sqsrte-small">'  + text.innerHTML + '</p>');
            
            if ($(ele).attr('data-active')) {
                $(`#${id}`).css('visibility', 'visible')
            }
        }
    })
    $('.gallery-masonry-lightbox-link').click(function() {
        var id = $(this).attr('href').split('=')[1]
        $('.light-caption').css('visibility', 'hidden')
        $(`#${id}`).css('visibility', 'visible')
    })
    $('.gallery-lightbox').click(function() {
        $('.light-caption').css('visibility', 'hidden')
        var id = location.search.split('=')[1]
        $(`#${id}`).css('visibility', 'visible')
    })
})
</script>
<style>
  figcaption.gallery-caption.gallery-caption-grid-masonry {
  	display: none;
  }
  
.light-caption {
    visibility: hidden;
    position: fixed;
  	font-family: source code pro;
  	color:grey;
    font-size: 14px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}
  .gallery-lightbox-item[data-active='true'] .light-caption {
    visibility: visible;
}
.gallery-lightbox-controls {
	display: flex !important;
  } 
</style>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi!

I'm trying something similar, maybe there's a code for that too (I'm completely clueless)?

I have my gallery set as a grid and I want the image captions to appear only when in the Lightbox view.

This is my gallery:

ScreenShot2024-06-17at4_03_55PM.thumb.png.78e30c5d5bdbfc973df2d883fcf70374.png

ScreenShot2024-06-17at4_04_06PM.thumb.png.a8658080b20f9f0f0cf205aad5be35e1.png

And I'm looking for something like this:

ScreenShot2024-06-17at4_04_27PM.thumb.png.f6c093308116a4e40ab099669f8bec04.pngScreenShot2024-06-17at4_04_44PM.thumb.png.df2a2d0888976ecd6c49f2fabfe2e851.png

(If I can also have just the name/title appear in the gallery grid view that would be great but less urgent)

 

Thank you so much!

Link to comment
On 6/18/2024 at 4:38 AM, VeeBee said:

@tuanphan Thanks for responding and sharing some code. I entered in the Code Injection Footer area but  it did nothing. I'm wondering if that's because I'm still on a trial site, not on a full subscription yet?

I see text already lightbox here

image.thumb.png.83e9ce9f9a9187934f9edde28534e1c8.png

On 6/18/2024 at 3:08 AM, Yasmin said:

Hi!

I'm trying something similar, maybe there's a code for that too (I'm completely clueless)?

I have my gallery set as a grid and I want the image captions to appear only when in the Lightbox view.

This is my gallery:

ScreenShot2024-06-17at4_03_55PM.thumb.png.78e30c5d5bdbfc973df2d883fcf70374.png

ScreenShot2024-06-17at4_04_06PM.thumb.png.a8658080b20f9f0f0cf205aad5be35e1.png

And I'm looking for something like this:

ScreenShot2024-06-17at4_04_27PM.thumb.png.f6c093308116a4e40ab099669f8bec04.pngScreenShot2024-06-17at4_04_44PM.thumb.png.df2a2d0888976ecd6c49f2fabfe2e851.png

(If I can also have just the name/title appear in the gallery grid view that would be great but less urgent)

 

Thank you so much!

You can use code I sent above.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan  Yes but I don't want the title to show on the Gallery page, ONLY on Lightbox mode. If you go to my Gallery page, you'll see that the titles are not showing up in Lightbox. And I have entered your code into the Footer Code Injection area.

Link to comment
On 6/20/2024 at 5:39 AM, VeeBee said:

@tuanphan  Yes but I don't want the title to show on the Gallery page, ONLY on Lightbox mode. If you go to my Gallery page, you'll see that the titles are not showing up in Lightbox. And I have entered your code into the Footer Code Injection area.

https://tangerine-primrose-rtrl.squarespace.com/

Password:  portraits/LIB/24

Can you share link to gallery page? Or you mean Editorial page?

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.