Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
sssupers

How can I create a gallery that sorts like on www.squarespace.com/templates ?

Recommended Posts

Hello, how can tagged pictures in a gallery be sorted the way Squarespace does it on their own template comparison page: Everytime you click a category, the templates rearrange.
How's this done ?

alt text

Edited by rhyann

"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 

Share this post


Link to post

It looks like there's a script on that page that grabs all of the template information into an array when the page is loaded (possibly via an Ajax call, because the project info is not a part of the initial payload). At this point the default Featured view is randomised. Refreshing the page will randomise again.

Clicking the categories fires off a script that applies that particular filter - hiding templates that are not applicable - and uses css transitions/animations to give the nice dynamic redraw effect.

Clicking a category does not randomise - only refreshing the page does that.

It's something that you can only do with developer mode and some nice client side scripting.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

Thanks for the insight - I'm willing to do without the random thing

if only my galleries learned to sort!


"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...