GabrielD Posted July 29 Share Posted July 29 59 minutes ago, HoaLT said: 5 hours ago, GabrielD said: Hi, I've used the code from @tuanphan , and it works perfectly on desktop. However, on mobile, the arrows are on top of the images and don't align very well. What I want to do instead is hide the arrows and use a swipe to switch between images on mobile. I tried to ask ChatGPT for help, but it can't figure it out without messing up the captions. Does anyone here know a solution to this problem? Thanks! Expand Can you share your URL here so we can check it more easily? Sorry, forgot that. https://bumblebee-harp-k75n.squarespace.com/automotive Password: rayan Link to comment
HoaLT Posted July 29 Share Posted July 29 (edited) 7 minutes ago, GabrielD said: Sorry, forgot that. https://bumblebee-harp-k75n.squarespace.com/automotive Password: rayan This is the best thing i can set style for the arrow on mobile @media only screen and (max-width: 767px){ .gallery-lightbox-control[data-previous] button { margin-left: -5.5vw; } .gallery-lightbox-control[data-next] button { margin-right: -5.5vw; } } The action to pinch zoom on lightbox I have no idea Edited July 29 by HoaLT Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
GabrielD Posted July 29 Share Posted July 29 32 minutes ago, HoaLT said: This is the best thing i can set style for the arrow on mobile @media only screen and (max-width: 767px){ .gallery-lightbox-control[data-previous] button { margin-left: -5.5vw; } .gallery-lightbox-control[data-next] button { margin-right: -5.5vw; } } Thank you. This worked in order to get the arrows further out, but when looking more closely on mobile and desktop the arrows don't align the same on both sides. 34 minutes ago, HoaLT said: This is the best thing i can set style for the arrow on mobile @media only screen and (max-width: 767px){ .gallery-lightbox-control[data-previous] button { margin-left: -5.5vw; } .gallery-lightbox-control[data-next] button { margin-right: -5.5vw; } } The action to pinch zoom on lightbox I have no idea Oh, that I don't want, sorry if I was unclear. What I do want if possible is to hide the arrows on mobile and use swipe instead. Link to comment
Ceccarelli Posted August 19 Share Posted August 19 (edited) Hi @tuanphanI tried the new code to create captions for light boxed images but it doesn't seem to be working... could you help see where I am going wrong? 🙂 Thank you! https://www.coreyceccarelli.com/home Edited August 19 by Ceccarelli Link to comment
HoaLT Posted August 19 Share Posted August 19 4 hours ago, Ceccarelli said: Hi @tuanphanI tried the new code to create captions for light boxed images but it doesn't seem to be working... could you help see where I am going wrong? 🙂 Thank you! https://www.coreyceccarelli.com/home Which code are you using? Can you share it here? tuanphan 1 Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
tuanphan Posted August 20 Share Posted August 20 21 hours ago, Ceccarelli said: Hi @tuanphanI tried the new code to create captions for light boxed images but it doesn't seem to be working... could you help see where I am going wrong? 🙂 Thank you! https://www.coreyceccarelli.com/home It doesn't work because you haven't enabled Caption yet Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Ceccarelli Posted August 20 Share Posted August 20 4 hours ago, tuanphan said: It doesn't work because you haven't enabled Caption yet Hi @tuanphan, Thank you! I just emailed as the captions are enabled but the problem is persisting 🙂 Link to comment
Ceccarelli Posted August 20 Share Posted August 20 21 hours ago, HoaLT said: Which code are you using? Can you share it here? Thank you! I am using this code: <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> Link to comment
tuanphan Posted August 21 Share Posted August 21 20 hours ago, Ceccarelli said: Hi @tuanphan, Thank you! I just emailed as the captions are enabled but the problem is persisting 🙂 Have you added caption to Images yet? Ceccarelli 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Ceccarelli Posted August 21 Share Posted August 21 3 hours ago, tuanphan said: Have you added caption to Images yet? yes in the simple grid gallery on the homepage they are enabled Link to comment
tuanphan Posted August 22 Share Posted August 22 20 hours ago, Ceccarelli said: yes in the simple grid gallery on the homepage they are enabled Your code missing jQuery Library Link. If code has not this library, it won't work. add this line to top of Code Injection Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> Ceccarelli 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Ceccarelli Posted August 22 Share Posted August 22 5 hours ago, tuanphan said: Your code missing jQuery Library Link. If code has not this library, it won't work. add this line to top of Code Injection Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> Thank you that worked! Any idea why it would work for some images but not the others? Also can you advise on how I could get the captions to appear below the image instead of across it? 🙂 Thank you 🙂 Link to comment
Ceccarelli Posted August 22 Share Posted August 22 7 minutes ago, Ceccarelli said: Thank you that worked! Any idea why it would work for some images but not the others? Also can you advise on how I could get the captions to appear below the image instead of across it? 🙂 Thank you 🙂 6 hours ago, tuanphan said: Your code missing jQuery Library Link. If code has not this library, it won't work. add this line to top of Code Injection Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> Also the wrong captions are appearing for the image. For example Image 1 is showing Image 14's caption? Link to comment
tuanphan Posted August 23 Share Posted August 23 13 hours ago, Ceccarelli said: Also the wrong captions are appearing for the image. For example Image 1 is showing Image 14's caption? Try this new code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Ceccarelli Posted September 3 Share Posted September 3 On 8/23/2024 at 5:27 AM, tuanphan said: Try this new code Hi @tuanphuan and thread, this still isn't working for me unfortunately - now I have 2 captions on Lightbox but its the wrong caption for each image and some have none too - you can check it out if you take a look at the first gallery on the homepage here www.coreyceccarelli.com - thanks in advance 🙂 Link to comment
Ceccarelli Posted September 3 Share Posted September 3 19 minutes ago, Ceccarelli said: Hi @tuanphuan and thread, this still isn't working for me unfortunately - now I have 2 captions on Lightbox but its the wrong caption for each image and some have none too - you can check it out if you take a look at the first gallery on the homepage here www.coreyceccarelli.com - thanks in advance 🙂 Figured it out 🙂 tuanphan 1 Link to comment
hello_studiofrey Posted Tuesday at 12:32 PM Share Posted Tuesday at 12:32 PM Hello I am having the same issues. I tried implementing your code in the Code Injection but it's not working. Could you please help me out? https://dreisicht.squarespace.com/home-1 pw: SF2024. I added descriptions to the images in the gallery but they don't appear in the Lightbox. Thank you very much! Natasa Link to comment
tuanphan Posted Wednesday at 07:27 AM Share Posted Wednesday at 07:27 AM 18 hours ago, hello_studiofrey said: Hello I am having the same issues. I tried implementing your code in the Code Injection but it's not working. Could you please help me out? https://dreisicht.squarespace.com/home-1 pw: SF2024. I added descriptions to the images in the gallery but they don't appear in the Lightbox. Thank you very much! Natasa /home-1 doesn't work. Can you check url again? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hello_studiofrey Posted Wednesday at 10:49 AM Share Posted Wednesday at 10:49 AM (edited) Hi @tuanphan, I'm sorry it's https://dreisicht.squarespace.com/home Pw: SF2024 Edited Saturday at 07:54 AM by hello_studiofrey Link to comment
Aada Posted 9 hours ago Share Posted 9 hours ago (edited) Hi! It would be so incredibly helpful if someone would be able to let me know how I could make the caption under the images in this portfolio gallery visible in lightbox. Thank you in advance for your help! https://www.mirakallio-tavin.com/paintings/project-one-ephnc-4f5cb I'm afraid I can't share login details but even general suggestions would help. For instance, is it enough to use the image's uploaded file name to target the specific image in CSS? Edited 9 hours ago by Aada 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