Jump to content

nowicluk

Circle Member
  • Posts

    70
  • Joined

  • Last visited

Everything posted by nowicluk

  1. 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>
  2. 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; }
  3. @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!
  4. I tested the first photo of the page with the following text which is cut on desktop and mobile:
  5. 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
  6. @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>
  7. I have fixed it myself. Thank you anyways.
  8. 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.
  9. 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?
  10. 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
  11. 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
  12. When I apply the instructions provided from the forum discussion you shared, it messes all up. Have a look now.
  13. 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.
  14. @tuanphan Do you have any suggestion for this one?
  15. 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
  16. 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
  17. 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.
×
×
  • 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.