Jump to content

Gallery Caption workarounds for 7.1?

Recommended Posts

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.

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

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

 

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

 

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
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;
}

 

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

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!

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

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

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

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
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;
}
}

 

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
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;

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

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

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
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;
}

 

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

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.