Auto-scroll Gallery (Type - Slideshow:Reel)

On 7/8/2022 at 12:16 AM, tuanphan said:

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>

 

Tried this code in the footer section of code inject but it doesn't seem to be working for me

2 hours ago, travisfisher said:

Tried this code in the footer section of code inject but it doesn't seem to be working for me

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

https://terrier-tunny-5b46.squarespace.com/ password:123321

On 2/1/2023 at 1:27 PM, ArvinPaul said:

https://terrier-tunny-5b46.squarespace.com/ password:123321

 

Which page are you referring to?

Hi I also added this to me site with the new code and it did not work. I am trying to get a reel gallery on my homepage to autoscroll through. Any advice on how to get this working? Thank you 

lauraevephotography.com

3 hours ago, LauraEve said:

I also added this to me site with the new code and it did not work.

It appears to be working to me.

Hi! This code works so great, thank you for it. I have two galleries on my page, and it's only autoscrolling the first one. How would I set it to autoplay both of them?

2 hours ago, penguininthefreezer said:

How would I set it to autoplay both of them?

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Hi @tuanphan I am trying to do this but all the options above seem to require a higher level of account. Is there a way of making autoscroll but on a basic membership plan? Thanks, Clare 

https://cooperreed.squarespace.com/ 

8 hours ago, clare1 said:

all the options above seem to require a higher level of account. Is there a way of making autoscroll but on a basic membership plan?

I'm not @tuanphan but the answer is no.

@tuanphan This has worked super well for me in sites I've built to display logos of featured clients. HOWEVER, the site I'm currently working on, I'm wanting to add a regular slideshow gallery reel, but when I add to the page, it disables this coding above. SOS. 

URL: www.lumieremarketing.co
PW: lmc123

@Beyondspace

This code works perfectly for me!! However, is there any way to set the two gallery slideshows at different timings, or to have one going left & the other going right?? They're TOO in sync and it looks odd.

URL: www.lumieremarketing.co
PW: lmc123

Thank you! 

On 6/19/2023 at 10:43 PM, SashaMiana said:

@tuanphan This has worked super well for me in sites I've built to display logos of featured clients. HOWEVER, the site I'm currently working on, I'm wanting to add a regular slideshow gallery reel, but when I add to the page, it disables this coding above. SOS. 

URL: www.lumieremarketing.co
PW: lmc123

You mean the code doesn't work on new gallery reel?

Works but globally across ALL slideshows on the website. What is the code to only apply it to a particular one?

Thanks in advance.

6 hours ago, Sebbo said:

Works but globally across ALL slideshows on the website. What is the code to only apply it to a particular one?

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Hello, Would the above code work on my site?

Site: https://bugle-sapphire-htk6.squarespace.com/welcome-new

I do have a slideshow:reel but it doesn't seem to work. My version of Squarespace is 7.1 . Do I need to modified some code?

Thank you for answering my question. 

19 hours ago, VVS said:

I do have a slideshow:reel but it doesn't seem to work.

It appears to be working to me. I see the images advance every two seconds.

Hi all,

It seems I can't get it working on my site... Can someone help me out?

https://tomanage-1.squarespace.com/onze-klanten with password brawerij

Second section is the troublemaker 🙂

TIA!

Stijn

5 hours ago, artyp said:

It seems I can't get it working on my site...

The code you are using appears not to be from this thread. It is designed to auto click a Summary block. You have used a gallery section so you need to use code for a gallery section. This thread appears to contain several versions that might do the job.

On 2/29/2024 at 9:50 PM, creedon said:

The code you are using appears not to be from this thread. It is designed to auto click a Summary block. You have used a gallery section so you need to use code for a gallery section. This thread appears to contain several versions that might do the job.

The code is from this thread, tested all the version again and none is working 🙄

On 3/5/2024 at 3:29 PM, artyp said:

The code is from this thread, tested all the version again and none is working 🙄

This is tested against your site and it works
 

<script>
// Wait for the DOM content to be fully loaded
window.onload = function() {
  	if (window.self !== window.top) {
      return;
	}
    // Function to simulate clicking the next arrow
    function clickNext(arrow) {
        arrow.click();
    }

    // Query all elements with the class for carousel next arrows
    var nextArrows = document.querySelectorAll('[data-test="gallery-reel-control-btn-next"]');

    // Set auto-scrolling for each carousel
    nextArrows.forEach(function(arrow) {
        var intervalId; // Variable to hold the interval ID

        // Define a function to handle auto-scrolling for a specific carousel
        function autoScroll() {
            clickNext(arrow);
        }

        // Start the auto-scrolling for the current carousel
        intervalId = setInterval(autoScroll, 4000);

        // Stop autoplay when the arrow is clicked
        arrow.addEventListener("click", function(e) {
			// Stop autoplay when it is user-triggered event
            if (e.offsetX || e.offsetY) {
                clearInterval(intervalId);
            }
        });
    });
};
</script>

Place it in your Footer injection

On 3/15/2024 at 4:53 AM, Beyondspace said:

This is tested against your site and it works
 

<script>
// Wait for the DOM content to be fully loaded
window.onload = function() {
  	if (window.self !== window.top) {
      return;
	}
    // Function to simulate clicking the next arrow
    function clickNext(arrow) {
        arrow.click();
    }

    // Query all elements with the class for carousel next arrows
    var nextArrows = document.querySelectorAll('[data-test="gallery-reel-control-btn-next"]');

    // Set auto-scrolling for each carousel
    nextArrows.forEach(function(arrow) {
        var intervalId; // Variable to hold the interval ID

        // Define a function to handle auto-scrolling for a specific carousel
        function autoScroll() {
            clickNext(arrow);
        }

        // Start the auto-scrolling for the current carousel
        intervalId = setInterval(autoScroll, 4000);

        // Stop autoplay when the arrow is clicked
        arrow.addEventListener("click", function(e) {
			// Stop autoplay when it is user-triggered event
            if (e.offsetX || e.offsetY) {
                clearInterval(intervalId);
            }
        });
    });
};
</script>

Place it in your Footer injection

Thank you so much… does anyone know if there's a way to adjust this code so that the user-triggered 'Stop autoplay when the arrow is clicked'  is stopped after a certain period of time to resume the autoplay? – Currently it doesn't unless the page has refreshed. I'd like it to restart after say 10 seconds or so if possible. 

Also, this code only affects the 'next' arrow in the gallery. Is it also possible to have the same 'pause' affect happen when clicking the back arrow (arrow to previous image in gallery.)

Website is currently under construction: ameliaandco.com/work 
Password: 2020four
(Im a novice on the coding side so please go easy!!)
The code is currently in the footer as suggested above. Thanks for any help.

I'm about to lose my mind! LOL I have 2 gallerys on my home page. One for scrolling images, and one for scrolling logos. I'm using a code I've used on many other sites and for some reason, it is JUST not working on this site. Please help! I'm desparate. @tuanphan @Beyondspace

www.freeclinic.squarespace.com

PW: fc123

15 minutes ago, SashaMiana said:

I'm using a code I've used on many other sites and for some reason, it is JUST not working on this site.

You need to install jQuery.

Add the following to Website > Pages > Website Tools > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Let us know how it goes.

@creedon  Ahhh! It's working, THANK YOU!