nowicluk

Solved myself, below is the code I used from another member: <script> document.addEventListener("DOMContentLoaded", function () { // configure the classes we're looking for const listClass = "div.gallery figure"; const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a"; const lightBoxCaption = "lightbox-caption"; const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']" // select all gallery elements, find their captions // if they exist then extract the slide id and add a new caption element // to the lightbox slide const n = document.querySelectorAll(listClass); for (var i = 0; i < n.length; i++) { const a = n[i].querySelector(linkClass); const c = n[i].querySelector("figcaption"); if (a && a.href && c) { const id = a.href.split("=")[1]; const lbSelector = lightboxSlideSelector.replace("{0}",id); const lb = document.querySelector(lbSelector); const cp = document.createElement("figcaption"); cp.className = lightBoxCaption; cp.innerHTML = c.innerHTML; lb.appendChild(cp); } } }); </script> <style> figcaption.gallery-caption { display:none; } figcaption.lightbox-caption { bottom:0; font-family: "Europa", serif; font-style: regular; font-size: 16px; line-height: 1.4em; color: #061A37; text-align:justify; } </style>

For the website https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close (password: tcl2022) I am using the following codes which work perfectly fine except the caption gets cut off automatically. It seems there is a limited word count. How do I avoid captions to be cut? Please check the first image of the link provided above. I attached a screenshot below. Code Injection > Footer: <script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ 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> CSS: // Caption in Lightbox // body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Europa", serif; font-style: regular; font-size: 16px; line-height: 1.4em; color: #061A37; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 1); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 10px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 1em; background-color: #ffffff; transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; }

@brandon would you be able to help here?

@tuanphan can you help me resolve this issue? I am desperately trying to figure this out so the text is not being cut automatically. I appreciate you support!

I tested the first photo of the page with the following text which is cut on desktop and mobile:

Hi, I used a code posted by @tuanphan for a website to show captions for photos in the lightbox. Everything worked perfectly fine until I discovered that the text is limited and automatically cut. Does anyone have a solution so all the text is displayed fully? Below is the link to the website and the password. The first photo of the gallery has the example of the caption being cute in the lightbox on desktop and mobile. Appreciate the help. Thank you. https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close Password: tcl2022

Thank you. I coded it myself.

@Beyondspace thank you heaps. The code worked. Would you be able to help me adapt it? Below are screenshots of the desktop and mobile view. I would need the text box to be under the photo and not cover it. I tried adapting the code but when I position it properly, the text gets cut off, especially on mobile. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> function createNodeCaption(textContent){ var divElement = document.createElement("div"); var pElement = document.createElement("p"); pElement.innerHTML = textContent; divElement.classList.add("style-gallery-lightbox-text"); divElement.appendChild(pElement); return divElement; } $( document ).ready(function() { var itemGallery = document.getElementsByClassName('gallery-grid-item'); var itemGalleryLightBox = document.getElementsByClassName('gallery-lightbox-item'); var countGalleryItem = itemGallery.length; for(var i = 0; i < countGalleryItem; i++){ if(itemGallery[i].getElementsByTagName('p').length != 0){ var text = itemGallery[i].getElementsByTagName('p')[0].textContent; var itemNeedCaption = itemGalleryLightBox[i].getElementsByClassName('gallery-lightbox-item-src')[0]; itemNeedCaption.appendChild(createNodeCaption(text)); } } }); </script> <style> figcaption.gallery-caption.gallery-caption-grid-simple { display: none; } .style-gallery-lightbox-text { padding: 10px 0px 25px 0px; display: block; position: absolute; left: 50%; top: 90%; width: 100%; transform: translate(-50%, -50%); font-size: .3em text-align: left; } .style-gallery-lightbox-text p { width: 90%; padding: 10px 15px; margin: auto; color: white; background-color: rgba(0,0,0,0.5); } @media screen and (max-width:767px) { .style-gallery-lightbox-text { top: 70%; } } </style>

I have fixed it myself. Thank you anyways.

Closed.

I figured it all out. Thank you.

I figured it all out. Thank you.

Here you go. The text is under the photo. When I click on the photo the lightbox opens. All I need for all galleries across the website to display the text in the lightbox underneath.

Same here, I am not using Custom CSS to add padding. 😕

Thank you for looking into this. I don't use a Custom CSS for the gallery. Any other way other suggestion why this is displayed incorrectly on mobile?

Hi there, as you can see below, I used a preset Squarespace section, which I assume is a photo carousel. On mobile I can't adjust it and display it correctly. https://octahedron-tiger-52rc.squarespace.com/ Password: tcl2022

Hi there, my mobile navigation menu is displayed in two lines and if I center it, it doesn't change. https://octahedron-tiger-52rc.squarespace.com/ Password: tcl2022

When I apply the instructions provided from the forum discussion you shared, it messes all up. Have a look now.

When you follow the link https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close you see the first photo which has lightbox activated. The link to the discussion which you sent does not work for me unfortunately.

@tuanphan Do you have any suggestion for this one?

Sorry, password is tcl2022.

tcl2022

Hi there, in the Featured Galleries section of my website, is it possible instead of rotating one image after another to rotate three images at the same time? https://octahedron-tiger-52rc.squarespace.com/ Password: tlc2022

Hi there, I am trying to implement photo descriptions in the lightbox under each photo only (website wide) instead of under the photo in the gallery view. I have reviewed a few discussions here but none work. Can anyone help? https://octahedron-tiger-52rc.squarespace.com/afghanistan-up-close Password: tlc2022

Thank you for this. Could you check once more. The icons are in line with the navigation, but the button is still higher. It only moved a bit.