Jump to content

Gallery Caption workarounds for 7.1?

Recommended Posts

On 6/16/2021 at 1:14 AM, tuanphan said:

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>

 

@tuanphan thanks so much for all your help in this thread!

The quoted code modified for the strips gallery type has turned captions on nicely in Lightbox mode, which is great!  However, the captions only update correctly when moving through the gallery with mouse-input; using the arrow keys on my mac causes the current caption to persist regardless of the image moved to, and then disappear after a second.

Any idea as to what might be going on?  Thanks so much!

Link to comment
  • 2 weeks later...
On 7/14/2021 at 3:50 PM, jonathan2 said:

Hi Brandon, I have used the code provided but am getting double ups on the captions. Any way i can delete one? Cheers

Screen Shot 2021-07-14 at 8.49.20 PM.png

Add to Design > Custom CSS

/* hide 1 lightbox caption */
body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description {
    display: 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
8 hours ago, FG1 said:

Hi 🙂 I'm also tryin to get captions on a Lightbox in 7.1 using Grid gallery. its driving me nuts. 

This is a long thread and I cant tell what specific css code to put in the code injection section.

Can someone help? Many thanks!!

Kindly share your site url to help having a look

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Thank you for your reply 🙂

Sorry my site isn't finalized yet so it isn't live/publicly accessible yet.  sorry :[]  I've attached screenshots instead. 

I created my site 2 weeks ago (June 2021) so I assume I'm using 7.1 . 

I have my photography portfolio in a Gallery - Grid: Masonry. I have entered Description text for each image. I have enabled Ligthbox. I have added I HAVE NO OTHER CUSTOM CODE ADDED. 

I'm trying to do the following: I want NO captions on the main gallery page (like now), but when I click an image, I want the lightbox to display with the caption (name of the model from the image Description text) for that image to show beneath the bottom left corner of the image. Make sense?

Thank you so much!

Gallery Grid Masonry.png

Lightbox .png

Link to comment
14 hours ago, FG1 said:

Thank you for your reply 🙂

Sorry my site isn't finalized yet so it isn't live/publicly accessible yet.  sorry :[]  I've attached screenshots instead. 

I created my site 2 weeks ago (June 2021) so I assume I'm using 7.1 . 

I have my photography portfolio in a Gallery - Grid: Masonry. I have entered Description text for each image. I have enabled Ligthbox. I have added I HAVE NO OTHER CUSTOM CODE ADDED. 

I'm trying to do the following: I want NO captions on the main gallery page (like now), but when I click an image, I want the lightbox to display with the caption (name of the model from the image Description text) for that image to show beneath the bottom left corner of the image. Make sense?

Thank you so much!

Gallery Grid Masonry.png

Lightbox .png

You can setup access password & share url

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

Any insights as to why the quoted code for displaying captions in lightbox mode only works when navigating the gallery with mouse or touch input, and not keyboard?  With the arrow keys, the next image displays but the caption remains from the previously viewed image, and then fades out after one second.

Here's a link to a gallery demonstrating this:  https://dove-bear-a9r4.squarespace.com/figures

Password: site123

Thanks for any help!!

On 7/5/2021 at 4:24 PM, MDurante said:

@tuanphan thanks so much for all your help in this thread!

The quoted code modified for the strips gallery type has turned captions on nicely in Lightbox mode, which is great!  However, the captions only update correctly when moving through the gallery with mouse-input; using the arrow keys on my mac causes the current caption to persist regardless of the image moved to, and then disappear after a second.

Any idea as to what might be going on?  Thanks so much!

Link to comment
On 6/16/2021 at 1:14 AM, tuanphan said:

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>

 

Sorry, this is the code I'm referring to, modified for the strips gallery type...

Link to comment
5 hours ago, FG1 said:

both the sample images have Description text. Do I need to add another caption somewhere else too?

Screen Shot 2021-07-19 at 10.08.39 AM.png

This is solid answer for 7.1 gallery section, just copy the whole snippet into Code injectionimage.thumb.png.5ffca8900a16e7019664682b7648083f.png

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 7/18/2021 at 10:10 AM, MDurante said:

Sorry, this is the code I'm referring to, modified for the strips gallery type...

Try this unminified version of the script 

it works well with the keyboard navigation with the previous question

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@bangank36 sorry if I am missing the idea here 🙃 

I tried inserting either of the two different code scripts you referenced in the CSS Code Injection Footer section but I could NOT get the captions to display like you did with the image of the red flowers and "milla" below the lightbox.

Please can you reinsert the code in my website again and leave it there so I can see?

Many thanks!

Link to comment
7 hours ago, FG1 said:

@bangank36 i replaced the code. Still not working. sorry if this is a stupid mistake 😦....

PM the code, you should remove what you have in header and copy the whole into header

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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...
On 8/6/2021 at 5:17 PM, Markii22 said:

 

Is possible to add captions to the lightboxes in a gallery,

Use this code

https://forum.squarespace.com/topic/200162-show-caption-in-lightbox-71/?do=findComment&comment=481138

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
  • 3 weeks later...

Sorry again for the delay in answering.  

Here, I'm including two links.  One for a photo on the website's main page and another for a photo on another page, as examples.  Hope the links work.  This are just for two photos but the problems are happening in the whole website.

 

I changed my website password to :     photos123

https://hilloftara.com

        in this one (and in all others of the main page) a large white space appears between the photos and the caption when viewing it in the lightbox in Mobile mode.

https://sunset.com

       --in this one (and also in all other pages I start) the same white space appears when viewing in mobile mode

      -- also in all the photos in all other pages (except for the ones in the main page) the caption is also appearing below the photo when not looking at it with lightbox (I would like it to appear  only in lightbox)

 

🙂

Edited by Wanderlust123
Link to comment

Ok, so I was able to fix one of the issues with a code you had already provided me, which I had forgotten to add.  Also, I just discovered the links do not work, so please ignore those.

So the remaining issue is that a large white space appears between the photos and the caption when viewing it in a lightbox through Mobile mode.

website password:     photos123

Link to comment
On 8/25/2021 at 3:59 AM, Wanderlust123 said:

Sorry again for the delay in answering.  

Here, I'm including two links.  One for a photo on the website's main page and another for a photo on another page, as examples.  Hope the links work.  This are just for two photos but the problems are happening in the whole website.

 

I changed my website password to :     photos123

https://hilloftara.com

        in this one (and in all others of the main page) a large white space appears between the photos and the caption when viewing it in the lightbox in Mobile mode.

https://sunset.com

       --in this one (and also in all other pages I start) the same white space appears when viewing in mobile mode

      -- also in all the photos in all other pages (except for the ones in the main page) the caption is also appearing below the photo when not looking at it with lightbox (I would like it to appear  only in lightbox)

 

🙂

Hi, Can you check site url?

Forbidden

You don't have permission to access this resource.

Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.

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

I just discovered the links do not work, so please ignore those.

Ok, so I was able to fix one of the issues with a code you had already provided me, which I had forgotten to add.  

So the remaining issue is that a large white space appears between the photos and the caption when viewing it in a lightbox through Mobile mode.

 

website password:     photos123

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.