Gallery Caption workarounds for 7.1?

On 6/12/2021 at 3:32 AM, tuanphan said:

rename

grid to masonry

Awesome, thank you very much!

I've been reading through all the pages for this post but I am a complete newbie at coding and I feel like I'm reading an alien language.

I'm trying to get captions to show up when my images are hovered over when in a Lightbox.  I would like this to appear for the images I have in my cover page, as well as in other pages.  I am using Masonry to display my images.  Can someone help me with what code I need to input and where.  Thanks in advance.

10 hours ago, Wanderlust123 said:

I've been reading through all the pages for this post but I am a complete newbie at coding and I feel like I'm reading an alien language.

I'm trying to get captions to show up when my images are hovered over when in a Lightbox.  I would like this to appear for the images I have in my cover page, as well as in other pages.  I am using Masonry to display my images.  Can someone help me with what code I need to input and where.  Thanks in advance.

Can you share link to your site? We can help easier

Here it is

https://dalmatian-flugelhorn-6yx4.squarespace.com

password: site123

13 hours ago, Wanderlust123 said:

Here it is

https://dalmatian-flugelhorn-6yx4.squarespace.com

 

password: site123

Add to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
var _0x18f8=['4XEKhWb','split','append','279421JnDniD','174124UAhleR','227308JzjUsg','.light-caption','data-slide-url','click','<div\x20id=\x22','1StuSOj','href','</div>','1pfvxst','attr','visible','data-active','84014XxewXU','visibility','184517htMRIo','.gallery-masonry-lightbox-link','css','26517cvfpgc','8mavTWA','innerHTML','hidden','64469fjXWFj'];function _0xbb1a(_0x21878a,_0xe769f9){_0x21878a=_0x21878a-0xf6;var _0x18f8d5=_0x18f8[_0x21878a];return _0x18f8d5;}(function(_0x9c6da1,_0x53aae6){var _0x125ba8=_0xbb1a;while(!![]){try{var _0x44495d=-parseInt(_0x125ba8(0x10b))*-parseInt(_0x125ba8(0x10c))+-parseInt(_0x125ba8(0x110))+parseInt(_0x125ba8(0xf6))+parseInt(_0x125ba8(0x104))*-parseInt(_0x125ba8(0xfe))+parseInt(_0x125ba8(0x102))+parseInt(_0x125ba8(0x108))*parseInt(_0x125ba8(0x107))+parseInt(_0x125ba8(0x10f))*-parseInt(_0x125ba8(0xfb));if(_0x44495d===_0x53aae6)break;else _0x9c6da1['push'](_0x9c6da1['shift']());}catch(_0x15479e){_0x9c6da1['push'](_0x9c6da1['shift']());}}}(_0x18f8,0x22fa8),jQuery(document)['ready'](function(_0x48503d){var _0x421d42=_0xbb1a,_0x12759b=document['getElementsByClassName']('gallery-caption-content');_0x48503d('.gallery-lightbox-list\x20.gallery-lightbox-item')['each'](function(_0x6a23e1,_0x50e05d){var _0x28c9fa=_0xbb1a,_0x55cc91=_0x12759b[_0x6a23e1],_0x1d8c9f=_0x48503d(_0x50e05d)[_0x28c9fa(0xff)](_0x28c9fa(0xf8));_0x55cc91&&(_0x48503d(_0x50e05d)[_0x28c9fa(0x10e)](_0x28c9fa(0xfa)+_0x1d8c9f+'\x22\x20class=\x22light-caption\x22>'+_0x55cc91[_0x28c9fa(0x109)]+_0x28c9fa(0xfd)),_0x48503d(_0x50e05d)[_0x28c9fa(0xff)](_0x28c9fa(0x101))&&_0x48503d('#'+_0x1d8c9f)[_0x28c9fa(0x106)]('visibility',_0x28c9fa(0x100)));}),_0x48503d(_0x421d42(0x105))[_0x421d42(0xf9)](function(){var _0x1efba1=_0x421d42,_0x3878d9=_0x48503d(this)['attr'](_0x1efba1(0xfc))[_0x1efba1(0x10d)]('=')[0x1];_0x48503d(_0x1efba1(0xf7))[_0x1efba1(0x106)](_0x1efba1(0x103),_0x1efba1(0x10a)),_0x48503d('#'+_0x3878d9)[_0x1efba1(0x106)](_0x1efba1(0x103),'visible');}),_0x48503d('.gallery-lightbox')[_0x421d42(0xf9)](function(){var _0x209c48=_0x421d42;_0x48503d(_0x209c48(0xf7))[_0x209c48(0x106)](_0x209c48(0x103),_0x209c48(0x10a));var _0x228568=location['search'][_0x209c48(0x10d)]('=')[0x1];_0x48503d('#'+_0x228568)['css'](_0x209c48(0x103),_0x209c48(0x100));});}));
</script>
<style>
  .gallery-lightbox-item[data-active='true'] .light-caption {
    visibility: visible;
    position: relative;
    bottom: -20px;
}
</style>

I copied and pasted it to the area you said but nothing happened.  Am I doing something wrong?

It worked perfectly in the lightbox, but also shows the caption under the image before clicking on it.  How do I make the caption only appear in lightbox?

8 hours ago, Wanderlust123 said:

It worked perfectly in the lightbox, but also shows the caption under the image before clicking on it.  How do I make the caption only appear in lightbox?

Add to Code Injection Header

<style>
  body.homepage figcaption.gallery-caption.gallery-caption-grid-masonry {
    display: none !important;
}
</style>

Worked perfectly for the homepage! How do I make it do the same thing for the rest of the pages?

On 6/17/2021 at 11:26 AM, Wanderlust123 said:

Worked perfectly for the homepage! How do I make it do the same thing for the rest of the pages?

Add to Design > Custom CSS

body figcaption.gallery-caption.gallery-caption-grid-masonry {
    display: none !important;
}

Amazing!  Thank you so much! 🙂

Is there custom code that can be used to have the captions display below the image?

Right now the only built in option is Bottom, which displays overlaid at the bottom of the image but I would like to have the caption shown below the respective images in the gallery.

Thanks!

11 hours ago, dsprague27 said:

Is there custom code that can be used to have the captions display below the image?

Right now the only built in option is Bottom, which displays overlaid at the bottom of the image but I would like to have the caption shown below the respective images in the gallery.

Thanks!

Hi. Can you share link to gallery on your site? We can check easier

I sent you a message @tuanphan

Hi!

I have a quick question for one of my galleries. I'm currently using the below code to have the masonry grid show a caption hover, which works fine but it seems to be conflicting with my ability to have images click through to other pages. The other code I'm using for standalone image sections seems to be working just fine. Any idea what might be the issue with the gallery sections? Thanks!

https://maxamillionpolo.com/

pw: 12345

<style> .gallery-caption {position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0;}

.gallery-caption-wrapper {display: flex; align-items: center; /* center vertically */justify-content: center; /* center horizontally */}

.gallery-caption-content {font-size: 1rem !important; /* caption font size */color: white; /*caption font color */}

.gallery-masonry-item {position: relative;}

.gallery-masonry-item:hover .gallery-caption {opacity: 1;}

.gallery-caption-grid-masonry {transition-delay: 0ms;} </style>

1 hour ago, millionp said:

Hi!

I have a quick question for one of my galleries. I'm currently using the below code to have the masonry grid show a caption hover, which works fine but it seems to be conflicting with my ability to have images click through to other pages. The other code I'm using for standalone image sections seems to be working just fine. Any idea what might be the issue with the gallery sections? Thanks!

https://maxamillionpolo.com/

pw: 12345

<style> .gallery-caption {position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0;}

.gallery-caption-wrapper {display: flex; align-items: center; /* center vertically */justify-content: center; /* center horizontally */}

.gallery-caption-content {font-size: 1rem !important; /* caption font size */color: white; /*caption font color */}

.gallery-masonry-item {position: relative;}

.gallery-masonry-item:hover .gallery-caption {opacity: 1;}

.gallery-caption-grid-masonry {transition-delay: 0ms;} </style>

Hi. Where is masonry?

6 hours ago, dsprague27 said:

I sent you a message @tuanphan

Add to Custom CSS

@media screen and (min-width:901px) {
.sqs-gallery-design-stacked-slide img {
    top: -50px !Important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
    bottom: -10px;
}
}

4 hours ago, tuanphan said:

Add to Custom CSS

@media screen and (min-width:901px) {
.sqs-gallery-design-stacked-slide img {
    top: -50px !Important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
    bottom: -10px;
}
}

 

Thanks @tuanphan, however it is telling me there is a syntax error, I believe on line 3 with the top: -50px !important;

6 hours ago, tuanphan said:

Hi. Where is masonry?

The issue is here: https://burgundy-lettuce-3ta9.squarespace.com/work/artists

The issue arises on all the gallery photos that aren't large, horizontal standalone images. The hover and caption will display just fine but the page click-through doesn't seem to work. 

Hi @brandon

This code was working perfectly til this week. Do you know if Squarespace has changed their backend on the 7.1 template?

On 6/24/2021 at 2:59 AM, earth biscuit said:

Hi @brandon

This code was working perfectly til this week. Do you know if Squarespace has changed their backend on the 7.1 template?

 

SS fixed problem 1-2 days ago. You can check again.

On 6/23/2021 at 8:52 PM, dsprague27 said:

Thanks @tuanphan, however it is telling me there is a syntax error, I believe on line 3 with the top: -50px !important;

a sorry, typo, I should be lowercase.

!important

Not !Important

On 6/23/2021 at 10:15 PM, millionp said:

The issue is here: https://burgundy-lettuce-3ta9.squarespace.com/work/artists

The issue arises on all the gallery photos that aren't large, horizontal standalone images. The hover and caption will display just fine but the page click-through doesn't seem to work. 

Add to Design > Custom CSS

/* Enable masonry hover click */
figcaption.gallery-caption.gallery-caption-grid-masonry {
    pointer-events: none;
}

The codes are still working perfectly but when I go into mobile mode and then look at the images through lightbox the photo and the captions are separated by a very big blank area.  How can I make the caption closer to the image?

7 hours ago, Wanderlust123 said:

The codes are still working perfectly but when I go into mobile mode and then look at the images through lightbox the photo and the captions are separated by a very big blank area.  How can I make the caption closer to the image?

Can you share link to photos? We will check it again