Auto-scroll Gallery (Type - Slideshow:Reel)

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!
 

I am also looking for this! :)

Any word on this? I am also searching. 

Thanks in advance for anyone who may be able to help!

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.

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.

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!

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>

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) 

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>

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?

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

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
})

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>

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.

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

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?

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?

@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!

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

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

@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>

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>

@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 

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>

@tuanphan Thank you so much! It's working and looks great!