Ayu Posted March 11, 2023 Share Posted March 11, 2023 (edited) Website: https://www.royal-buffet.fr/tours Password: ROYALBUFFET2023 Hello! I'm trying to make an expandable gallery/image on hover and currently this is what I have. I want to make the images that are not active stay right beside the image that is active (currently there is white space between each) and when it expands to again dynamically stay to the expanded image side? similar to this: https://www.bokagrp.com Edited March 15, 2023 by Ayu We need to publish soon, so needed to put the reel in an unlisted page. Beyondspace 1 Link to comment
Ayu Posted March 15, 2023 Author Share Posted March 15, 2023 Also wanted to ask if there is a way to add a one line auto scroll logo wall on the footer? I checked other posts, but you can't seem to add a gallery or list feature on the footer. Link to comment
Ayu Posted March 18, 2023 Author Share Posted March 18, 2023 Sorry for multiple questions, I was wondering how to remove the background on the embedded TikTok videos? Page: https://www.royal-buffet.fr/toulouse-espagne Thank you for your time! Link to comment
tuanphan Posted March 20, 2023 Share Posted March 20, 2023 It is color of tiktok itself, no way to remove/change it. 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
Ayu Posted March 21, 2023 Author Share Posted March 21, 2023 Oh Okay! Thank you for letting me know. Are the other two options possible? Thank you for your time! Link to comment
tuanphan Posted March 25, 2023 Share Posted March 25, 2023 On 3/21/2023 at 5:57 PM, Ayu said: Oh Okay! Thank you for letting me know. Are the other two options possible? Thank you for your time! Hi, Auto Logo Scroll: This is possible. 2 options Option 1. You can find a free auto scroll code on Codepen.io, then share link, we can convert it to Squarespace Code Block, so you can add to Footer Option 2. You can add me as a contributor, I'm a Circle Member, so I can add a Gallery Block to your footer, then you can edit it to achieve your request. 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
Ayu Posted March 29, 2023 Author Share Posted March 29, 2023 For option 1 will the code work for the logos we have on the website? I would need to upload the images then link them, is that correct? this is the code that I found : https://codepen.io/Chandresh_Patel/pen/ZERrXBY We would need the width to be flexible(since different sized images/logos), ideally it should be non intrusive and same size as in the picture. Thank you so much for taking the time to help with this again! Greatly appreciated! Link to comment
tuanphan Posted April 3, 2023 Share Posted April 3, 2023 On 3/30/2023 at 5:07 AM, Ayu said: For option 1 will the code work for the logos we have on the website? I would need to upload the images then link them, is that correct? this is the code that I found : https://codepen.io/Chandresh_Patel/pen/ZERrXBY We would need the width to be flexible(since different sized images/logos), ideally it should be non intrusive and same size as in the picture. Thank you so much for taking the time to help with this again! Greatly appreciated! No. With Codepen, we will need to replace current logo with Codepen code, and you need to edit everything (add, delete...image in Code Block) To add Code Pen, edit page > Add a Code Block > paste this code <div class="client-logo-img-section client-logo-img-slider-section "> <div class="logo-images logo-img-slider" pause-on-hover="false"> <div class=""> <div class="widget_1668149948924-logo-1 logo-block"> <img src="https://www.adalystic.com/hs-fs/hubfs/Logo-1.png?width=139&height=41&name=Logo-1.png" alt="Logo-1" loading="lazy" width="139" height="41" style="max-width: 100%; height: auto;" srcset="https://www.adalystic.com/hs-fs/hubfs/Logo-1.png?width=70&height=21&name=Logo-1.png 70w, https://www.adalystic.com/hs-fs/hubfs/Logo-1.png?width=139&height=41&name=Logo-1.png 139w, https://www.adalystic.com/hs-fs/hubfs/Logo-1.png?width=209&height=62&name=Logo-1.png 209w, https://www.adalystic.com/hs-fs/hubfs/Logo-1.png?width=278&height=82&name=Logo-1.png 278w, https://www.adalystic.com/hs-fs/hubfs/Logo-1.png?width=348&height=103&name=Logo-1.png 348w, https://www.adalystic.com/hs-fs/hubfs/Logo-1.png?width=417&height=123&name=Logo-1.png 417w" sizes="(max-width: 139px) 100vw, 139px"> </div> </div> <div class=""> <div class="widget_1668149948924-logo-2 logo-block"> <img src="https://www.adalystic.com/hs-fs/hubfs/Logo-2.png?width=139&height=74&name=Logo-2.png" alt="Logo-2" loading="lazy" width="139" height="74" style="max-width: 100%; height: auto;" srcset="https://www.adalystic.com/hs-fs/hubfs/Logo-2.png?width=70&height=37&name=Logo-2.png 70w, https://www.adalystic.com/hs-fs/hubfs/Logo-2.png?width=139&height=74&name=Logo-2.png 139w, https://www.adalystic.com/hs-fs/hubfs/Logo-2.png?width=209&height=111&name=Logo-2.png 209w, https://www.adalystic.com/hs-fs/hubfs/Logo-2.png?width=278&height=148&name=Logo-2.png 278w, https://www.adalystic.com/hs-fs/hubfs/Logo-2.png?width=348&height=185&name=Logo-2.png 348w, https://www.adalystic.com/hs-fs/hubfs/Logo-2.png?width=417&height=222&name=Logo-2.png 417w" sizes="(max-width: 139px) 100vw, 139px"> </div> </div> <div class=""> <div class="widget_1668149948924-logo-3 logo-block"> <img src="https://www.adalystic.com/hs-fs/hubfs/Logo-3.png?width=139&height=136&name=Logo-3.png" alt="Logo-3" loading="lazy" width="139" height="136" style="max-width: 100%; height: auto;" srcset="https://www.adalystic.com/hs-fs/hubfs/Logo-3.png?width=70&height=68&name=Logo-3.png 70w, https://www.adalystic.com/hs-fs/hubfs/Logo-3.png?width=139&height=136&name=Logo-3.png 139w, https://www.adalystic.com/hs-fs/hubfs/Logo-3.png?width=209&height=204&name=Logo-3.png 209w, https://www.adalystic.com/hs-fs/hubfs/Logo-3.png?width=278&height=272&name=Logo-3.png 278w, https://www.adalystic.com/hs-fs/hubfs/Logo-3.png?width=348&height=340&name=Logo-3.png 348w, https://www.adalystic.com/hs-fs/hubfs/Logo-3.png?width=417&height=408&name=Logo-3.png 417w" sizes="(max-width: 139px) 100vw, 139px"> </div> </div> <div class=""> <div class="widget_1668149948924-logo-4 logo-block"> <img src="https://www.adalystic.com/hs-fs/hubfs/Logo-4.png?width=139&height=138&name=Logo-4.png" alt="Logo-4" loading="lazy" width="139" height="138" style="max-width: 100%; height: auto;" srcset="https://www.adalystic.com/hs-fs/hubfs/Logo-4.png?width=70&height=69&name=Logo-4.png 70w, https://www.adalystic.com/hs-fs/hubfs/Logo-4.png?width=139&height=138&name=Logo-4.png 139w, https://www.adalystic.com/hs-fs/hubfs/Logo-4.png?width=209&height=207&name=Logo-4.png 209w, https://www.adalystic.com/hs-fs/hubfs/Logo-4.png?width=278&height=276&name=Logo-4.png 278w, https://www.adalystic.com/hs-fs/hubfs/Logo-4.png?width=348&height=345&name=Logo-4.png 348w, https://www.adalystic.com/hs-fs/hubfs/Logo-4.png?width=417&height=414&name=Logo-4.png 417w" sizes="(max-width: 139px) 100vw, 139px"> </div> </div> <div class=""> <div class="widget_1668149948924-logo-5 logo-block"> <img src="https://www.adalystic.com/hs-fs/hubfs/Logo-5.png?width=139&height=49&name=Logo-5.png" alt="Logo-5" loading="lazy" width="139" height="49" style="max-width: 100%; height: auto;" srcset="https://www.adalystic.com/hs-fs/hubfs/Logo-5.png?width=70&height=25&name=Logo-5.png 70w, https://www.adalystic.com/hs-fs/hubfs/Logo-5.png?width=139&height=49&name=Logo-5.png 139w, https://www.adalystic.com/hs-fs/hubfs/Logo-5.png?width=209&height=74&name=Logo-5.png 209w, https://www.adalystic.com/hs-fs/hubfs/Logo-5.png?width=278&height=98&name=Logo-5.png 278w, https://www.adalystic.com/hs-fs/hubfs/Logo-5.png?width=348&height=123&name=Logo-5.png 348w, https://www.adalystic.com/hs-fs/hubfs/Logo-5.png?width=417&height=147&name=Logo-5.png 417w" sizes="(max-width: 139px) 100vw, 139px"> </div> </div> <div class=""> <div class="widget_1668149948924-logo-6 logo-block"> <img src="https://www.adalystic.com/hs-fs/hubfs/Logo-6.png?width=139&height=16&name=Logo-6.png" alt="Logo-6" loading="lazy" width="139" height="16" style="max-width: 100%; height: auto;" srcset="https://www.adalystic.com/hs-fs/hubfs/Logo-6.png?width=70&height=8&name=Logo-6.png 70w, https://www.adalystic.com/hs-fs/hubfs/Logo-6.png?width=139&height=16&name=Logo-6.png 139w, https://www.adalystic.com/hs-fs/hubfs/Logo-6.png?width=209&height=24&name=Logo-6.png 209w, https://www.adalystic.com/hs-fs/hubfs/Logo-6.png?width=278&height=32&name=Logo-6.png 278w, https://www.adalystic.com/hs-fs/hubfs/Logo-6.png?width=348&height=40&name=Logo-6.png 348w, https://www.adalystic.com/hs-fs/hubfs/Logo-6.png?width=417&height=48&name=Logo-6.png 417w" sizes="(max-width: 139px) 100vw, 139px"> </div> </div> <div class=""> <div class="widget_1668149948924-logo-7 logo-block"> <img src="https://www.adalystic.com/hs-fs/hubfs/Neurovine_SecondaryLogo_Colored_copy.png?width=139&height=71&name=Neurovine_SecondaryLogo_Colored_copy.png" alt="Neurovine_SecondaryLogo_Colored_copy" loading="lazy" width="139" height="71" style="max-width: 100%; height: auto;" srcset="https://www.adalystic.com/hs-fs/hubfs/Neurovine_SecondaryLogo_Colored_copy.png?width=70&height=36&name=Neurovine_SecondaryLogo_Colored_copy.png 70w, https://www.adalystic.com/hs-fs/hubfs/Neurovine_SecondaryLogo_Colored_copy.png?width=139&height=71&name=Neurovine_SecondaryLogo_Colored_copy.png 139w, https://www.adalystic.com/hs-fs/hubfs/Neurovine_SecondaryLogo_Colored_copy.png?width=209&height=107&name=Neurovine_SecondaryLogo_Colored_copy.png 209w, https://www.adalystic.com/hs-fs/hubfs/Neurovine_SecondaryLogo_Colored_copy.png?width=278&height=142&name=Neurovine_SecondaryLogo_Colored_copy.png 278w, https://www.adalystic.com/hs-fs/hubfs/Neurovine_SecondaryLogo_Colored_copy.png?width=348&height=178&name=Neurovine_SecondaryLogo_Colored_copy.png 348w, https://www.adalystic.com/hs-fs/hubfs/Neurovine_SecondaryLogo_Colored_copy.png?width=417&height=213&name=Neurovine_SecondaryLogo_Colored_copy.png 417w" sizes="(max-width: 139px) 100vw, 139px"> </div> </div> </div> </div> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script> $(".client-logo-img-slider-section .logo-img-slider").slick({ speed: 5000, draggable: false, dots: false, arrows: false, autoplay: true, autoplaySpeed: 0, cssEase: 'linear', slidesToShow: 6, slidesToScroll: 1, infinite: true, swipeToSlide: false, centerMode: false, swipe: false, pauseOnHover:false, responsive: [ { breakpoint: 1300, settings: { slidesToShow: 4, } }, { breakpoint: 880, settings: { slidesToShow: 3, } }, { breakpoint: 767, settings: { slidesToShow: 2, } }, { breakpoint: 480, settings: { slidesToShow: 1, } } ] }); </script> 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
Ayu Posted April 4, 2023 Author Share Posted April 4, 2023 Added the code and replaced the images, and the code is working thank you so much! One thing, is there a way to make the height smaller? Need to put it on one line but it doesn't let me go shorter than that. The website is live, so had to test this on a private page that I cannot publish.. Is it fine if I invite you as editor/contributor(not sure of the name) to check it? Sorry about this and thank you for your help again, you're the best! Link to comment
tuanphan Posted April 7, 2023 Share Posted April 7, 2023 On 4/4/2023 at 10:03 PM, Ayu said: Added the code and replaced the images, and the code is working thank you so much! One thing, is there a way to make the height smaller? Need to put it on one line but it doesn't let me go shorter than that. The website is live, so had to test this on a private page that I cannot publish.. Is it fine if I invite you as editor/contributor(not sure of the name) to check it? Sorry about this and thank you for your help again, you're the best! You can duplicate page, add it there, then share url, we can check easier 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
Ayu Posted April 21, 2023 Author Share Posted April 21, 2023 I couldn't duplicate the page since this has been pushed back. Could you guys check the code on the website https://royalbuffet.fr and let us know what causes the big delay in the loading? We have resized all images but it still seems to be very slow. Thanks for your help sorry for the inconvenience. Link to comment
tuanphan Posted April 23, 2023 Share Posted April 23, 2023 On 4/21/2023 at 8:36 PM, Ayu said: I couldn't duplicate the page since this has been pushed back. Could you guys check the code on the website https://royalbuffet.fr and let us know what causes the big delay in the loading? We have resized all images but it still seems to be very slow. Thanks for your help sorry for the inconvenience. It looks like you solved it? 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
Ayu Posted April 24, 2023 Author Share Posted April 24, 2023 The autoscroll logos have been left. I was asking about the website being very slow. Link to comment
tuanphan Posted April 26, 2023 Share Posted April 26, 2023 On 4/25/2023 at 6:18 AM, Ayu said: The autoscroll logos have been left. I was asking about the website being very slow. Speed is fast to me. You try testing it 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
Ayu Posted April 27, 2023 Author Share Posted April 27, 2023 We tried on 2 different mobiles and 4 different PCs and laptops. All were slow.. There is a slight delay on when everything actually loads and we think it's the code but not sure where is the problem. Is there anything you know that we could do to improve? Thank you again for your time in this! Link to comment
tuanphan Posted April 29, 2023 Share Posted April 29, 2023 I have no idea now. You try posting to some groups on Facebook: Squarespace Community, Squarespace Customization Resource Group,.. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment