Michael_Walkling Posted July 25, 2022 Share Posted July 25, 2022 Hello. I'd like to suggest a new feature for Squarespace 7.1. "Live Photo" style image/video galleries Much like with iOS live Photo - I'd like to create a still image gallery, and when the visitor hovers their cursor on an image (or, for mobile devices, holds their finger on the image), the image changes to a video and plays automatically. This is an example of what I would like to achieve, and I think you'll agree it's pretty effective. It's a Wordpress website. (Note: Not all images in this example website work as videos): https://palladianmedia.com/built-environment/ If this has been posted the wrong place then please let me know where new feature suggestions can be posted? Link to comment
paul2009 Posted July 25, 2022 Share Posted July 25, 2022 48 minutes ago, Michael_Walkling said: If this has been posted the wrong place then please let me know where new feature suggestions can be posted? Squarespace employees don't routinely monitor this forum for feature requests (see the guidelines - item 6). If you’d like to make a feature request, you can do so by contacting Squarespace Customer Care using a support ticket. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Michael_Walkling Posted July 25, 2022 Author Share Posted July 25, 2022 Thank you, Paul. In the mean time, if anyone has a suggestion as to how a "Live Photo" effect can currently be achieved then I'd be delighted to hear about it. Thank you in advance. Link to comment
paul2009 Posted July 25, 2022 Share Posted July 25, 2022 2 hours ago, Michael_Walkling said: In the mean time, if anyone has a suggestion as to how a "Live Photo" effect can currently be achieved then I'd be delighted to hear about it. The WP page you mentioned contains some short mp4 videos, Some JavaScript is then used to play them on mouseover and stop them on mouseout. Although this isn't a built-in feature on Squarespace, a developer could achieve this with some mp4 videos and some code 🙂 As a simple example, if I add that same video to a Code Block on a site and add some simple JS, I can achieve the same thing. For example, see https://recordit.co/9ANEZX11oc Michael_Walkling 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Michael_Walkling Posted July 25, 2022 Author Share Posted July 25, 2022 Thank you for taking the time to reply, Paul. I can see that this would work well. Would you be ok to share the JS used to play and stop the video? Was this pasted in to the code block? Thanks. Link to comment
Solution paul2009 Posted July 25, 2022 Solution Share Posted July 25, 2022 2 hours ago, Michael_Walkling said: Would you be ok to share the JS used to play and stop the video? It was a very simplistic example, added to Settings > Advanced> Code Injection > Footer: <script> myVideo = document.querySelector('video'); function hoverVideo(e) { myVideo.play(); } function hideVideo(e) { myVideo.pause(); } myVideo.addEventListener('mouseover', hoverVideo, false); myVideo.addEventListener('mouseout', hideVideo, false); </script> Michael_Walkling 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Michael_Walkling Posted July 26, 2022 Author Share Posted July 26, 2022 Thank you Paul. This is really helpful. I've added an additional line of code to reset the video on mouseout: <script> myVideo = document.querySelector('video'); function hoverVideo(e) { myVideo.play(); } function hideVideo(e) { myVideo.pause(); myVideo.currentTime = 0; } myVideo.addEventListener('mouseover', hoverVideo, false); myVideo.addEventListener('mouseout', hideVideo, false); </script> Thanks again. This is exactly what I require. paul2009 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment