adameus Posted September 27, 2022 Share Posted September 27, 2022 Site URL: https://vibraphone-spinach-2age.squarespace.com/ Hi - Password: Adameus1 Click "Folio 2" up top. When someone clicks on a property and it goes to a lightbox, the arrows make it impossible to know what property the customer is looking at when they click left and right. So I need to either disable the left and right arrow buttons OR add a static caption. Can anyone help? Link to comment
Ziggy Posted September 27, 2022 Share Posted September 27, 2022 Getting the caption to show on a lightbox is tricky, there are a number of threads on the forum looking for the answer, this is one of them: If you want to hide the gallery arrows you can use this, but it won't stop you using keyboard arrows: .gallery-lightbox-controls { display: none !important; } Hope this helps a little! DangDang 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
adameus Posted September 27, 2022 Author Share Posted September 27, 2022 this is great (losing the arrows)...would be perfect ion anyone can figure out how to disable the left right arrows! Making this work would eliminate the need for static captions on the lightbox, Link to comment
joseph81 Posted September 27, 2022 Share Posted September 27, 2022 (edited) In the meantime I was experimenting with this and I came up with this code, if you are still interested to have dinamic captions. First you add a script in in the Injections section: <script> document.querySelectorAll('.gallery-grid').forEach(gallery => { const id = gallery.getAttribute('data-section-id'); const lightboxId = `data-lightbox-section-id="${id}"`; const lightboxItems = [...document.querySelectorAll(`.gallery-lightbox-outer-wrapper[${lightboxId}] figure`)]; gallery.querySelectorAll('.gallery-grid-item').forEach((item,i) => { const caption = item.querySelector('.gallery-caption-content')?.textContent; if(caption) { const figcaption = ` <figcaption> ${caption} </figcaption> `; lightboxItems[i].insertAdjacentHTML("beforeend", figcaption); } }); }); </script> In custom CSS you style that caption: .gallery-lightbox-item figcaption { position: absolute; bottom: -38px; background: #fff; padding: 10px; min-width: 300px; text-align: center; } Edited September 27, 2022 by joseph81 tuanphan 1 Jozsef Kerekes - Front-end developer and Squarespace enthusiast My Blog: https://ui-workarounds.comIf you like my answer, please give me an upvote/like. Highly appreciated. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment