Jump to content

[Free Share] AutoPlay for Portfolio Collection Page

Recommended Posts

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

 

Edited by bangank36

Greeting, it's 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, Keyword Highlighter
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.