Gallery reel autoplay not working for second gallery on a page

Site URL: https://magenta-harp-d43d.squarespace.com/venues

I'm building a site for a client. One of the pages contains two gallery reels. I've installed some jquery code that automatically advances the gallery reel. It's working for the first gallery on the page, but not the second.

Can anyone give me some help on how I need to amend the code to work on all instances of gallery reel on the page? @tuanphan, do you know how this might be achieved?

URL: https://magenta-harp-d43d.squarespace.com/venues

Password: Happiness2021!

<script>
$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
    [0].click()}     
  }, 2000);
});
</script>

On 8/11/2021 at 8:33 PM, laura_c said:

Site URL: https://magenta-harp-d43d.squarespace.com/venues

I'm building a site for a client. One of the pages contains two gallery reels. I've installed some jquery code that automatically advances the gallery reel. It's working for the first gallery on the page, but not the second.

Can anyone give me some help on how I need to amend the code to work on all instances of gallery reel on the page? @tuanphan, do you know how this might be achieved?

URL: https://magenta-harp-d43d.squarespace.com/venues

Password: Happiness2021!

 

<script>
$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
    [0].click()}     
  }, 2000);
});
</script>

 

Hi,

Remove this

Quote

[0]

Thanks @tuanphan. This is working now. But it has a strange side effect. The script now seems to be triggering the editing mode whenever the page is selected in the backend.

Any ideas?

On 8/19/2021 at 7:46 AM, laura_c said:

Thanks @tuanphan. This is working now. But it has a strange side effect. The script now seems to be triggering the editing mode whenever the page is selected in the backend.

Any ideas?

Create a .js file on your pc >> paste this code (no <script> tag)

Suppose the file name will be: reel-autoplay.js

$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
    [0].click()}     
  }, 2000);
});

Next, upload js file to your site.

Final, add this to Code Injection > Footer

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/reel-autoplay.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>

On 8/22/2021 at 3:23 PM, tuanphan said:

Create a .js file on your pc >> paste this code (no <script> tag)

Suppose the file name will be: reel-autoplay.js

$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
    [0].click()}     
  }, 2000);
});

Next, upload js file to your site.

Final, add this to Code Injection > Footer

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/reel-autoplay.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>

 

@tuanphan, you're a lifesaver! I had to remove the [0] from the script before uploading (in case someone else uses this). But it's finally all working.

Thanks so much for your help. I couldn't be more grateful.