Views Quicksand

Summary

Quicksand is a jQuery Plugin that provides a nice animation for filtering or reordering lists of content. For a preview of what 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.

Installation:

1. Download and extract the module to "sites/all/modules".
2. Download 'jquery.quicksand.js' and place it in sites/all/libraries/jquery.quicksand.

A note about row filtering

To filter rows quicksand requires each row have something that uniquely identifies it (eg, an entity id or URL). When configuring this module you are required to input a selector to an element which contains this information and the attribute it is contained within.

In the example below the unique elements would be "article" and the attribute would be "id" because it contains the node's ID and is therefore unique:

<div class="views-row views-row-1">
    <article class="node page" id="node-page-13">
   </article>
</div>

How to use:

1. Edit the required view.
2. Under "Format" set the view to "Views Quicksand".
3. Configure the settings including the filtering information (see above).
4. Ensure the view is using AJAX (under "Other" > "Use AJAX").

Note: this module is agnostic of CSS, if you would a grid or columns, you must handle this with your own CSS. Similarly, if you already have a view with a defined style, you should be able to use this module to provide quicksand filtering without any additional styling.

Test Feature

A view that has already been setup and configured is available in the "views_quicksand_test" module. Once enabled you can visit "/views-quicksand-test" to see it in action.

Feel free to provide feedback in the issue queue.

and Code Drop