[Free Share] AutoPlay for Portfolio Collection Page

Hi friends,

In some questions on forum, I find out that many members need to automatically change the background on the portfolio collection page (currently, client needs to hover the item to make background change). Today, I share my code to work around with this feature. So here we go:

- Final result we approach:

- Version: Squarespace 7.1

- Requirement: Javascript code (you will need at least the business plan to run javascript).

- Installation:

1. Access: Home > Settings > Advanced > Code injection

2. Add the following code on footer

<!--beyondspace autoplay Hover Portfolio start-->
<script>
  (function(){
    window.addEventListener('load', () => {
      beyAutoPlayPortfolio(3000); // change the speed of transition
    });
  })()
  function beyAutoPlayPortfolio(e){let t=document.querySelectorAll(".portfolio-hover-items-list > li");if(t.length>1){let o=new Event("mouseenter"),l=null,r=function(){let i=document.querySelector('.portfolio-hover-item[data-active="true"]').closest("li").nextElementSibling;i||(i=t[0]),i.querySelector("a").dispatchEvent(o),l=setTimeout(r,e)};r(),t.forEach(e=>{e.querySelector("a").addEventListener("mouseenter",function(e){e.isTrusted&&clearTimeout(l)}),e.querySelector("a").addEventListener("mouseleave",function(e){e.isTrusted&&r()})})}}
</script>
<!--beyondspace autoplay Hover Portfolio end-->

3. Check your result

Hope it can help

Support me by some comments or pressing 👍 if this useful for you

Hi,

is there a way to make this work for the mobile version as well?

Thanks!

Hi,

This is working great on desktop - thank you!
As above, looking for the same solution for mobile.
Any help with this much appreciated.

On 1/29/2024 at 9:59 PM, RGCreative said:

Hi,

This is working great on desktop - thank you!
As above, looking for the same solution for mobile.
Any help with this much appreciated.

Yes I'm dying to learn how to use this on just mobile!