-
Posts
70 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by nowicluk
-
Coded caption under photo in lightbox is being cut
nowicluk replied to nowicluk's topic in Pages & Content
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; }
- 341 replies
-
Coded caption under photo in lightbox is being cut
nowicluk replied to nowicluk's topic in Pages & Content
@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! -
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
-
@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>
-
Gallery carousel to rotate 3 images at a time
nowicluk replied to nowicluk's topic in Customize with code
I have fixed it myself. Thank you anyways. -
How to change social media icons in navigation?
nowicluk replied to nowicluk's topic in Customize with code
Closed.- 1 reply
-
- social-links
- landing-page
-
(and 1 more)
Tagged with:
-
Preset photo carousel does not display properly on mobile
nowicluk replied to nowicluk's topic in Customize with code
I figured it all out. Thank you. -
Preset photo carousel does not display properly on mobile
nowicluk replied to nowicluk's topic in Customize with code
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? -
Gallery carousel to rotate 3 images at a time
nowicluk replied to nowicluk's topic in Customize with code
@tuanphan Do you have any suggestion for this one? -
Gallery carousel to rotate 3 images at a time
nowicluk replied to nowicluk's topic in Customize with code
Sorry, password is 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