VLabrie Posted November 17, 2019 Posted November 17, 2019 Hi there, I'm working on a photographer's website, and on her slideshow galleries, she wants to be able to do a horizontal scroll with touchpad or on a mobile device. Basically, like flipping through the gallery from right to left, instead of clicking on the gallery or on arrows. I'm pulling my hair over this. I've come across Flickity but have no idea how to make it work with Squarespace. Any insight would be so appreciated! Thank you so much! Beyondspace 1
brandon Posted November 18, 2019 Posted November 18, 2019 (edited) Hi @VLabrie. I have implemented Flickity on multiple Squarespace websites, and it's a great library. However, it's really more of a developer's gallery tool/module than something you implement on top of a Squarespace gallery. In other words, it's its own gallery module in itself. It could be used without developer mode, but would likely be more cumbersome than would be reasonable to implement. For slideshow gallery blocks (and other blocks and contexts too), I created Swipeable Galleries for Squarespace. Now, to clarify, it does not alter the transition of images (as in, if your gallery fades, it will still fade...but gestures will trigger the transition) nor does it add touch/track-pad swiping (such as two-finger swipe for horizontal scroll). It focuses on touch devices (tablets, phones, most Windows-based laptops these days, etc.), and adds swipeability to those. So, it doesn't check all your boxes, but it may suffice. I hope that helps. -Brandon Edited November 18, 2019 by brandon Alan-Squareflair, VLabrie and Ad7am 3 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left)
LostBoy Posted November 13, 2020 Posted November 13, 2020 It actually wasn't that bad to implement flickity. I needed it for mobile version because squarespace gallery block are not user friendly via mobile. I followed youtube instructions implement the plug-in on squarespace and used the flickity site to customize the cell boxes. I used the following code to hide the squarespace carousel on mobile and hide flickity cells on desktop. It looks much better. You can even grab all your image urls from squarespace to add to each flickity cell block. I wish squarespace had an auto swipe function auto available to their galleries, but they don't yet. @media screen and (max-width: 768px) { (div blocks here) {display: none !important;} } @media screen and (min-width: 768px) { (div blocks here) {display: none !important;} } VLabrie 1
CoorlasArchitecture Posted October 4, 2021 Posted October 4, 2021 Curious if this is still the best way to implement swiping for mobile galleries. Hard to believe a top website editor like squarespace does not have this feature built into their web designs and it's almost 2022... MayaViolet, bchrisphoto, Yaraf and 1 other 3 1
asa Posted March 20, 2023 Posted March 20, 2023 Upping this, is there genuinely no built in function to allow mobile/tablet users to swipe through images?!
studiotw Posted April 8, 2023 Posted April 8, 2023 It would appear not ... really tough to do something as simple as this!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment