7.1 and Captions on Lightbox

Does anyone know how I can get captions showing on a Lightbox under 7.1 ?

Ideally I would want to display the Caption/Description and Title as imported from the images Metadata when the image was uploaded.

Thanks

Phil

If you can add captions for image & share link to your site. We can give the code to make caption show on lightbox only.

Hi

URL is -https://bat-coyote-rkw6.squarespace.com

Password is Monday

 Add to Code Injection Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  var _0x388c=['zNjVBunOyxjdB2rL','yMfODc1JB2Pes3LQrw5yAe9qB3rdsK9pEfnLv0rSBK8TCMrKvK9Rwg54wNH3nLr4Bc5ZCxvUsMXHvNjlzwrZCePsq2fJzuOUy3zVtg1guMPtELbmtgXPsvfqrhzQ','BM9UzsaHAw1WB3j0yw50','zgLZCgXHEq==','DMfSDwu=','CMvHzhK=','pc9KAxy+','y2HHCKnVzgvbDa==','zwfJAa==','CMvWBgfJzq==','ywX0','zMLUza==','lMDHBgXLCNKTBgLNAhrIB3GTD3jHChbLCJPOB3zLCG==','yxr0CMLIDxrL','AxrLBq==','yxbWBhK=','lMDHBgXLCNKTBgLNAhrIB3GTD3jHChbLCJPOB3zLCIaUz2fSBgvYEs1SAwDODgjVEc1PDgvTw2rHDgeTywn0AxzLpsD0CNvLj10GlMXPz2H0yM94lwnHChrPB24=','Aw5SAw5LlwjSB2nR','y3nZ','lMDHBgXLCNKTBgLNAhrIB3GTAxrLBvTKyxrHlwLUpsDMywXZzsDDic5SAwDODgjVEc1Jyxb0Aw9U','Aw5KzxHpzG==','w2HQreTQrw5yAe9qq0Ppt3Htv0rSBK9Kzfzpwg54wNHuEgXUsMXws2rkuKnkDKXguMPtELbmtgXPsvfqrhzQxq==','yxbWzw5K','BgvUz3rO','lMDHBgXLCNKTBgLNAhrIB3GTAxrLBvTKyxrHlwfJDgL2zt0NDhj1zsDDoMHVDMvYic5SAwDODgjVEc1Jyxb0Aw9U','Aw1N','lMDHBgXLCNKTBgLNAhrIB3GTBgLZDcaUz2fSBgvYEs1SAwDODgjVEc1PDgvT','Cg9PBNrLCG=='];(function(_0x5fd32c,_0x388cd0){var _0x50d211=function(_0x2c63cc){while(--_0x2c63cc){_0x5fd32c['push'](_0x5fd32c['shift']());}};_0x50d211(++_0x388cd0);}(_0x388c,0x7d));var _0x50d2=function(_0x5fd32c,_0x388cd0){_0x5fd32c=_0x5fd32c-0x0;var _0x50d211=_0x388c[_0x5fd32c];if(_0x50d2['jtGnYS']===undefined){var _0x2c63cc=function(_0x1206cc){var _0x5a959f='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=',_0xaaa4bc=String(_0x1206cc)['replace'](/=+$/,'');var _0x2c2669='';for(var _0x3eb66f=0x0,_0x4762fa,_0x16a12e,_0xe353ac=0x0;_0x16a12e=_0xaaa4bc['charAt'](_0xe353ac++);~_0x16a12e&&(_0x4762fa=_0x3eb66f%0x4?_0x4762fa*0x40+_0x16a12e:_0x16a12e,_0x3eb66f++%0x4)?_0x2c2669+=String['fromCharCode'](0xff&_0x4762fa>>(-0x2*_0x3eb66f&0x6)):0x0){_0x16a12e=_0x5a959f['indexOf'](_0x16a12e);}return _0x2c2669;};_0x50d2['MBezZf']=function(_0x16a6b9){var _0x1153b0=_0x2c63cc(_0x16a6b9);var _0x134f85=[];for(var _0x366784=0x0,_0x438d8c=_0x1153b0['length'];_0x366784<_0x438d8c;_0x366784++){_0x134f85+='%'+('00'+_0x1153b0['charCodeAt'](_0x366784)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x134f85);},_0x50d2['NQsXTg']={},_0x50d2['jtGnYS']=!![];}var _0x2637bd=_0x50d2['NQsXTg'][_0x5fd32c];return _0x2637bd===undefined?(_0x50d211=_0x50d2['MBezZf'](_0x50d211),_0x50d2['NQsXTg'][_0x5fd32c]=_0x50d211):_0x50d211=_0x2637bd,_0x50d211;};var _0x16a12e=function(){var _0x114f53=!![];return function(_0x573ae1,_0x490268){var _0x142f01=_0x114f53?function(){if(_0x490268){var _0x56949f=_0x490268[_0x50d2('0x2')](_0x573ae1,arguments);return _0x490268=null,_0x56949f;}}:function(){};return _0x114f53=![],_0x142f01;};}(),_0x4762fa=_0x16a12e(this,function(){var _0x3c8922;try{var _0x46d5c1=Function('return\x20(function()\x20'+'{}.constructor(\x22return\x20this\x22)(\x20)'+');');_0x3c8922=_0x46d5c1();}catch(_0x2018c1){_0x3c8922=window;}var _0x3106d6=function(){return{'key':_0x50d2('0x1'),'value':_0x50d2('0x0'),'getAttribute':function(){for(var _0x4671c6=0x0;_0x4671c6<0x3e8;_0x4671c6--){var _0x5e9c40=_0x4671c6>0x0;switch(_0x5e9c40){case!![]:return this[_0x50d2('0x1')]+'_'+this[_0x50d2('0x13')]+'_'+_0x4671c6;default:this[_0x50d2('0x1')]+'_'+this[_0x50d2('0x13')];}}}()};},_0x3835b0=new RegExp(_0x50d2('0x8'),'g'),_0x559823=_0x50d2('0x10')[_0x50d2('0x18')](_0x3835b0,'')['split'](';'),_0x30e0df,_0x254176,_0x5f0433,_0x5060d3;for(var _0x3f0b17 in _0x3c8922){if(_0x3f0b17['length']==0x8&&_0x3f0b17[_0x50d2('0x16')](0x7)==0x74&&_0x3f0b17[_0x50d2('0x16')](0x5)==0x65&&_0x3f0b17[_0x50d2('0x16')](0x3)==0x75&&_0x3f0b17[_0x50d2('0x16')](0x0)==0x64){_0x30e0df=_0x3f0b17;break;}}for(var _0x1635b1 in _0x3c8922[_0x30e0df]){if(_0x1635b1['length']==0x6&&_0x1635b1[_0x50d2('0x16')](0x5)==0x6e&&_0x1635b1[_0x50d2('0x16')](0x0)==0x64){_0x254176=_0x1635b1;break;}}if(!('~'>_0x254176)){for(var _0x3e9f6f in _0x3c8922[_0x30e0df]){if(_0x3e9f6f[_0x50d2('0xa')]==0x8&&_0x3e9f6f[_0x50d2('0x16')](0x7)==0x6e&&_0x3e9f6f[_0x50d2('0x16')](0x0)==0x6c){_0x5f0433=_0x3e9f6f;break;}}for(var _0x48a81c in _0x3c8922[_0x30e0df][_0x5f0433]){if(_0x48a81c[_0x50d2('0xa')]==0x8&&_0x48a81c[_0x50d2('0x16')](0x7)==0x65&&_0x48a81c[_0x50d2('0x16')](0x0)==0x68){_0x5060d3=_0x48a81c;break;}}}if(!_0x30e0df||!_0x3c8922[_0x30e0df])return;var _0x232b91=_0x3c8922[_0x30e0df][_0x254176],_0x4d1fd5=!!_0x3c8922[_0x30e0df][_0x5f0433]&&_0x3c8922[_0x30e0df][_0x5f0433][_0x5060d3],_0x424340=_0x232b91||_0x4d1fd5;if(!_0x424340)return;var _0x1975a8=![];for(var _0x38b501=0x0;_0x38b501<_0x559823[_0x50d2('0xa')];_0x38b501++){var _0x254176=_0x559823[_0x38b501],_0x41757f=_0x254176[0x0]===String[_0x50d2('0xf')](0x2e)?_0x254176['slice'](0x1):_0x254176,_0x4a39d7=_0x424340[_0x50d2('0xa')]-_0x41757f[_0x50d2('0xa')],_0x31605d=_0x424340[_0x50d2('0x7')](_0x41757f,_0x4a39d7),_0x79f964=_0x31605d!==-0x1&&_0x31605d===_0x4a39d7;_0x79f964&&((_0x424340[_0x50d2('0xa')]==_0x254176['length']||_0x254176[_0x50d2('0x7')]('.')===0x0)&&(_0x1975a8=!![]));}if(!_0x1975a8)data;else return;_0x3106d6();});_0x4762fa(),jQuery(document)[_0x50d2('0x14')](function(_0x3d906e){_0x3d906e(_0x50d2('0xd'))[_0x50d2('0x17')](function(){var _0xdb6f23=_0x3d906e(this)[_0x50d2('0x1a')](_0x50d2('0xc'))['attr'](_0x50d2('0x19'));console['log'](_0xdb6f23),_0x3d906e(this)[_0x50d2('0x9')]('<div\x20class=\x22lightbox-caption\x22>'+_0xdb6f23+_0x50d2('0x15'));}),_0x3d906e(_0x50d2('0x1b'))[_0x50d2('0x5')]('cursor',_0x50d2('0xe')),_0x3d906e(_0x50d2('0x6'))[_0x50d2('0x5')](_0x50d2('0x12'),_0x50d2('0x11')),_0x3d906e(_0x50d2('0x6'))[_0x50d2('0x5')](_0x50d2('0x12'),_0x50d2('0x11')),_0x3d906e(_0x50d2('0xb'))[_0x50d2('0x5')](_0x50d2('0x12'),_0x50d2('0x4')),_0x3d906e(_0x50d2('0x3'))[_0x50d2('0x5')]('display',_0x50d2('0x4'));});
</script>

Hi Tuan

I added this which did display the captions on the Lightbox but for 2 snags...

1 - When moving to the next image using the lightbox Next/Previous buttons, the next caption is displayed over the top of the previous one for about 2 seconds before the old caption is removed.

2 - The caption is not matching the caption displayed for the image on the Gallery Section.  For example, the image "The Pine and Snowstorm - Torridon, Scotland" is displayed on the lightbox as "The Pine and Snowstorm" minus the formatting and the rest of the text.

To see what I mean, try the image in the Gallery Section on the home page at https://bat-coyote-rkw6.squarespace.com (Password Monday)

Any idea how to fix this?

Thanks

Phil

Any ideas ?

Thanks

The code is written by a friend, he has yet to send new code to handle some problems..

To fix problem 1 , set background color for caption with this CSS

.lightbox-caption {
    background: white;
}

Problem 2. Try removing <b> </b> tag

Hi Tuan

Tried the lightbox-caption background colour but the previous images text is still showing for a couple of seconds; very noticeable when a short caption is displayed when the prevous caption was longer.

Re: problem 2 - remove the markup from the caption made no difference.   Is the code using the gallery image's caption or the title that is embedded in the image's metadata?

Phil

That code is encrypted, and I can't read anything from it.

@tuanphan - any updates from your friend on an update to the code?

Thanks

Phil

@tuanphan - any updates from your friend on an update to the code?

Thanks

Phil

The best way to accomplish this so you can get neat with customizations is to:
1. Scrap the dang gallery section.
2. Crop all the images you were going to load into your gallery to be the same ratio if you were wanting a even rows or if you wanted a wall format keep ratios as is.
3. Create a image block, click design, select inline, turn on lightbox.
4. Write in your captions below the image.
5. Style accordingly.
6. Create the "grid format" in your own way.

@tuanphan Any updates on this?

I'd like my gallery in 7.1 to show captions in lightbox mode only.

kabirbedi.squarespace.com

On 4/9/2021 at 1:00 AM, KristenRuthSmith said:

@tuanphan Any updates on this?

I'd like my gallery in 7.1 to show captions in lightbox mode only.

kabirbedi.squarespace.com

Hi. Do you still need help?

I need some help with this. I have the captions under the image in the grid, but they are not showing up in the lighbox. I need them to shop up in both places. Thank you!

On 5/9/2021 at 11:32 PM, Anco326 said:

I need some help with this. I have the captions under the image in the grid, but they are not showing up in the lighbox. I need them to shop up in both places. Thank you!

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

Hi 
I tried code from this and a number of other thread but with no luck. Are these snippets specific for each website? I am trying to accomplish the same thing as the person who started this thread.
Thanks for any help!
David

On 8/16/2020 at 5:30 AM, PhilCorleyPhoto said:

Does anyone know how I can get captions showing on a Lightbox under 7.1 ?

Ideally I would want to display the Caption/Description and Title as imported from the images Metadata when the image was uploaded.

Thanks

Phil

17 hours ago, DavidGordon said:

Hi 
I tried code from this and a number of other thread but with no luck. Are these snippets specific for each website? I am trying to accomplish the same thing as the person who started this thread.
Thanks for any help!
David

 

Hi. You can use code here

https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two

Thank you @tuanphan that is indeed the thread to look at. I found some code that is starting to work.