Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Auto-scroll Gallery (Type - Slideshow:Reel)


gamercj

Question

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!
 

Link to comment

14 answers to this question

Recommended Posts

  • 4

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.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Link to comment
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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
})

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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 by bangank36
Update the automation for two Slideshow Reels on the page

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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 by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...