gamercj Posted March 23, 2020 Share Posted March 23, 2020 Hey, everyone! I have a Squarespace 7.1 site and I'm having an issue. I have a gallery block which I have set to "slideshow:reel" gallery type. I want the images to autoplay (which was a feature available in previous versions). I've tried the code injection from this thread, but I haven't had any luck getting it to work: https://forum.squarespace.com/topic/26409-summary-block-how-can-i-set-the-carousel-to-autoplay/ How can I get this gallery to autoplay/auto-scroll? Thank you! Sebbo 1 Link to comment
khill Posted May 9, 2020 Share Posted May 9, 2020 I am also looking for this! :) Sebbo 1 Link to comment
christialisha Posted June 10, 2020 Share Posted June 10, 2020 (edited) Any word on this? I am also searching. Thanks in advance for anyone who may be able to help! Edited June 10, 2020 by christialisha Link to comment
tuanphan Posted June 10, 2020 Share Posted June 10, 2020 2 hours ago, christialisha said: Any word on this? I am also searching. Thanks in advance for anyone who may be able to help! If you share link to gallery reel page, 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
Jentlemen Posted August 31, 2020 Share Posted August 31, 2020 I managed to write a code using Jquery. It's not to most elegant way, basically its made to click the next arrow in the slideshow every couple of seconds: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> const init = () => { setInterval(() => { $('.gallery-reel-control [aria-label="Next Slide"]').trigger('click'); }, 6000); // change this value to change the speed } document.addEventListener('DOMContentLoaded', init); </script> You can insert this into Code Injection or in to the Advanced section of the specific page the Slideshow is on. I haven't tested if this works on any other gallery types by the way. tuanphan, Cybergraph, kasper.arlund and 2 others 3 2 Link to comment
jesswp Posted August 8, 2021 Share Posted August 8, 2021 Hey @tuanphan - I am looking for a similar feature - the script above made other parts of my site wonky and would prefer another option if possible. https://contrabass-caper-5n75.squarespace.com/ (home page) pass: riad Thanks so much! Link to comment
tuanphan Posted August 11, 2021 Share Posted August 11, 2021 On 8/8/2021 at 11:34 PM, graceandoak said: Hey @tuanphan - I am looking for a similar feature - the script above made other parts of my site wonky and would prefer another option if possible. https://contrabass-caper-5n75.squarespace.com/ (home page) pass: riad Thanks so much! Hi. Add to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ setInterval(function(){ $('body.homepage .gallery-reel-control-btn[data-next]').click() },2000); }) </script> alwaysbetter 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
ElizaM3 Posted September 23, 2021 Share Posted September 23, 2021 On 8/31/2020 at 9:10 AM, Jentlemen said: I managed to write a code using Jquery. It's not to most elegant way, basically its made to click the next arrow in the slideshow every couple of seconds: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> const init = () => { setInterval(() => { $('.gallery-reel-control [aria-label="Next Slide"]').trigger('click'); }, 6000); // change this value to change the speed } document.addEventListener('DOMContentLoaded', init); </script> You can insert this into Code Injection or in to the Advanced section of the specific page the Slideshow is on. I haven't tested if this works on any other gallery types by the way. This worked for my gallery reel BUT it messed up other things on the website-- like editing features, the box would pop up then disappear and also when I go to my "orders"-- i'll click on the order and it opens then closes after 2 seconds. Any other codes that would not interfere with the rest of the site? (I am placing in css footer, if that info is needed) Link to comment
tuanphan Posted September 25, 2021 Share Posted September 25, 2021 On 9/24/2021 at 2:00 AM, ElizaM3 said: This worked for my gallery reel BUT it messed up other things on the website-- like editing features, the box would pop up then disappear and also when I go to my "orders"-- i'll click on the order and it opens then closes after 2 seconds. Any other codes that would not interfere with the rest of the site? (I am placing in css footer, if that info is needed) Try this new code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { if ( window.location == window.parent.location ) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://code.beaverhero.com/1632528612686.js'; document.getElementsByTagName('head')[0].appendChild(script); } else { console.log('iframe'); } }); </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
elleward Posted October 3, 2021 Share Posted October 3, 2021 On 9/25/2021 at 10:11 AM, tuanphan said: Try this new code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { if ( window.location == window.parent.location ) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://code.beaverhero.com/1632528612686.js'; document.getElementsByTagName('head')[0].appendChild(script); } else { console.log('iframe'); } }); </script> Hey there, I was having the same problem as ElizaM3, and I tried using this updated code but it wasn't working for me. Am I mean to be just using this new code, or still have the original code as well? Any thoughts? Beyondspace 1 Link to comment
Beyondspace Posted October 3, 2021 Share Posted October 3, 2021 2 hours ago, elleward said: Hey there, I was having the same problem as ElizaM3, and I tried using this updated code but it wasn't working for me. Am I mean to be just using this new code, or still have the original code as well? Any thoughts? What is your site url BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted October 3, 2021 Share Posted October 3, 2021 On 9/25/2021 at 7:11 AM, tuanphan said: Try this new code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { if ( window.location == window.parent.location ) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://code.beaverhero.com/1632528612686.js'; document.getElementsByTagName('head')[0].appendChild(script); } else { console.log('iframe'); } }); </script> @tuanphan your script run the init upon page load event, but it seem the the domcontentload only fire once (when you insert the script), so the init() never fire again, could I suggest you this iife method? (function docReady(fn) { const currentscript = document.currentScript; // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn.bind(this, currentscript), 1); } else { document.addEventListener("DOMContentLoaded", fn.bind(this, currentscript)); } })(() => { setInterval(() => { $('.gallery-reel-control [aria-label="Next Slide"]').trigger('click'); }, 6000); // change this value to change the speed }) tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted October 5, 2021 Share Posted October 5, 2021 (edited) On 10/3/2021 at 9:47 AM, elleward said: Hey there, I was having the same problem as ElizaM3, and I tried using this updated code but it wasn't working for me. Am I mean to be just using this new code, or still have the original code as well? Any thoughts? Thanks to tuanphan solution, I modify it a bit to fix that small issue <script> (function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } })(() => { if (window.location == window.parent.location) { const reelControls = document.querySelectorAll('.gallery-reel-control [aria-label="Next Slide"]'); reelControls.forEach(reelControl => { (function reelTimer() { setTimeout(() => { reelControl.click(); reelTimer(); }, 2000); // change this value to change the speed })(); }) } }); </script> Edited October 17, 2021 by bangank36 Update the automation for two Slideshow Reels on the page tuanphan and FLCwebmaster 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
aimatame Posted October 17, 2021 Share Posted October 17, 2021 Thanks for sharing solutions @bangank36 and @tuanphan! The code snippets works great. I have a situation where I want to have two Slideshow Reels on the page (as there are many logos). Is it possible to modify the code to make sure it works on both. Currently, the code only makes the first Reel move automatically while the other does not move. See page here. Beyondspace 1 Link to comment
Beyondspace Posted October 17, 2021 Share Posted October 17, 2021 (edited) 15 hours ago, aimatame said: Thanks for sharing solutions @bangank36 and @tuanphan! The code snippets works great. I have a situation where I want to have two Slideshow Reels on the page (as there are many logos). Is it possible to modify the code to make sure it works on both. Currently, the code only makes the first Reel move automatically while the other does not move. See page here. I've just updated the code for running automatically both two Slideshow Reels. Check if it works properly on your site Edited October 17, 2021 by bangank36 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
PrimeE Posted February 6, 2022 Share Posted February 6, 2022 Hi @bangank36, I added your revised code posted on Oct 18, but nothing happens. Am I supposed to add under @tuanphan's second version of code? Link to comment
Beyondspace Posted February 6, 2022 Share Posted February 6, 2022 14 hours ago, PrimeE said: Hi @bangank36, I added your revised code posted on Oct 18, but nothing happens. Am I supposed to add under @tuanphan's second version of code? Can you share your site with the protected password so we can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
MichelleKaldy Posted February 7, 2022 Share Posted February 7, 2022 @bangank36 hey there! I'm also having the same problem as @PrimeE that the code isn't working for me. Here is a screenshot of what I have added. Would love some advice on what I'm doing wrong! Thank you! Link to comment
Beyondspace Posted February 7, 2022 Share Posted February 7, 2022 10 hours ago, MichelleKaldy said: @bangank36 hey there! I'm also having the same problem as @PrimeE that the code isn't working for me. Here is a screenshot of what I have added. Would love some advice on what I'm doing wrong! Thank you! I 'll PM you BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
zoester300 Posted February 17, 2022 Share Posted February 17, 2022 On 10/5/2021 at 6:19 AM, bangank36 said: <script> (function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } })(() => { if (window.location == window.parent.location) { const reelControls = document.querySelectorAll('.gallery-reel-control [aria-label="Next Slide"]'); reelControls.forEach(reelControl => { (function reelTimer() { setTimeout(() => { reelControl.click(); reelTimer(); }, 2000); // change this value to change the speed })(); }) } }); </script> thank you @bangank36 this works perfectly Beyondspace 1 Link to comment
jbiesty Posted March 17, 2022 Share Posted March 17, 2022 (edited) @tuanphan I have used the code you suggested above, but it didn't work. Can you please advise? Thank you!! Site/PW below. https://chinchilla-ellipsoid-75sf.squarespace.com/ PW: SW2022 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ setInterval(function(){ $('body.homepage .gallery-reel-control-btn[data-next]').click() },2000); }) </script> Edited March 17, 2022 by jbiesty Link to comment
tuanphan Posted March 19, 2022 Share Posted March 19, 2022 On 3/18/2022 at 5:58 AM, jbiesty said: @tuanphan I have used the code you suggested above, but it didn't work. Can you please advise? Thank you!! Site/PW below. https://chinchilla-ellipsoid-75sf.squarespace.com/ PW: SW2022 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ setInterval(function(){ $('body.homepage .gallery-reel-control-btn[data-next]').click() },2000); }) </script> Use this new code <script> (function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } })(() => { if ( window.location == window.parent.location ) { const reelControl = document.querySelector('.gallery-reel-control [aria-label="Next Slide"]'); if (reelControl) { (function reelTimer() { setTimeout(() => { reelControl.click(); reelTimer(); }, 2000); // change this value to change the speed })(); } } }); </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
AshV3 Posted July 7, 2022 Share Posted July 7, 2022 @tuanphan Thanks for always being so responsive! Would the above code work on my site? Or does it need to be modified? Site: https://www.amyvanharen.com/ PW: amyvh13 I am looking for the gallery of logos on the homepage to scroll automatically. Thanks again! Ash Link to comment
tuanphan Posted July 8, 2022 Share Posted July 8, 2022 16 hours ago, AshV3 said: @tuanphan Thanks for always being so responsive! Would the above code work on my site? Or does it need to be modified? Site: https://www.amyvanharen.com/ PW: amyvh13 I am looking for the gallery of logos on the homepage to scroll automatically. Thanks again! Ash Just tested the code on your site. It should work. <script> (function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } })(() => { if ( window.location == window.parent.location ) { const reelControl = document.querySelector('.gallery-reel-control [aria-label="Next Slide"]'); if (reelControl) { (function reelTimer() { setTimeout(() => { reelControl.click(); reelTimer(); }, 2000); // change this value to change the speed })(); } } }); </script> daniellenoakes 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
AshM13 Posted July 11, 2022 Share Posted July 11, 2022 @tuanphan Thank you so much! It's working and looks great! Beyondspace 1 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