Jump to content

How to add gallery grid captions to lightbox.

Recommended Posts

Site URL: https://lilac-ranunculus-hadh.squarespace.com/

Hi! 

I'm currently trying to display my grid gallery captions in the lightbox. I found some code to insert within the Code Injection but it seems a little janky. 

I'm trying to display the captions just as they are in the gallery where the title is in italic while the artist name is in regular. The code I found also seems to have some kind of bug where the caption overlaps when you click over to the next image. Any advice?

––

Site: https://www.worthartadvisory.com/
PW: 147

Code Injected:

<script>
document.addEventListener("DOMContentLoaded", function() {
  addGalleryItemDescriptions(".gallery-lightbox");
  
  function addGalleryItemDescriptions(gs, gdzs) {
    var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs));
  }
});
</script>

––

Thanks!

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

On 2/19/2022 at 4:31 AM, ineedhelpwithawebsite said:

Site URL: https://lilac-ranunculus-hadh.squarespace.com/

Hi! 

I'm currently trying to display my grid gallery captions in the lightbox. I found some code to insert within the Code Injection but it seems a little janky. 

I'm trying to display the captions just as they are in the gallery where the title is in italic while the artist name is in regular. The code I found also seems to have some kind of bug where the caption overlaps when you click over to the next image. Any advice?

––

Site: https://www.worthartadvisory.com/
PW: 147

Code Injected:

<script>
document.addEventListener("DOMContentLoaded", function() {
  addGalleryItemDescriptions(".gallery-lightbox");
  
  function addGalleryItemDescriptions(gs, gdzs) {
    var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs));
  }
});
</script>

––

Thanks!

You can try @tuanphan's solution:

Hope it helps

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.