Views Quicksand

Summary

Quicksand is a jQuery Plugin that provides a nice animation for filtering or reordering lists of content. For a preview of how the animation looks like, head over to the plugin developers homepage.

Views Quicksand integrates this effect into Views. Therefore it provides a views style-plugin, which allows you to alter most settings the quicksand plugin provides.

This module won't work without a ajax-view and exposed filters/sort

Installation:

1. Download and extract the module to [yourdrupalroot]/sites/all/modules/
(final structure will be [yourdrupalroot]/sites/all/modules/views_quicksand/
2. Download 'jquery.quicksand.js' from 'http://razorjack.net/quicksand/' and put it into [yourdrupalroot]/sites/all/libraries/jquery.quicksand/
3. Download 'jquery.easing.1.3.js' from 'http://gsgd.co.uk/sandbox/jquery/easing/' and put it into [yourdrupalroot]/sites/all/libraries/jquery.easing/
(Make sure that you rename 'jquery.easing.1.3.js' or higher to 'jquery.easing.js')
the core easing library is used since beta5

How it works:

When the page is loaded entirely, a script clones the content of the used view and hides the original view-content. When the user filters/sorts the view, the result set is loaded in the background and when finished triggers the quicksand effect, which replaces the previously cloned set with the new one.
For this to work quicksand needs to know which items are identical. Therefore you have to specify a attribute which is unique for each row. In most cases this would be your NodeID. The style plugin expects the html-tag and attribute where this id is stored in. You can use jQuery syntax to select these elements.
In the example below this would be 'article' as tag and either 'id' or 'about'. (both would work)

How to Use:

1. Choose the view you want to enable the animation for
2. Determine a html tag and attribute which will identify a view-row as a unique item in your view (like the anchor-tag to a node and the href-attribute)
3. Go to the view edit page
4. Change the plugin under Format to "Views Quicksand"
5. Write the previously determined tag and attribute names into the appropriate fields on the settings page (use jQuery-selector like syntax)
6. Unless you haven't already: Expose a filter/sort and set your view to use ajax
7. Save your view and you should be good to go

Test Feature

Since beta3 there is a submodule which provides a preconfigured view, which should work out of the box. After enabling the module you can reach it under /views-quicksand-test .

Please test the module and provide feedback.
Thanks for using :)

Downloads