Basically.... Get this working... JSFiddle!
I am trying to use the jQuery plugin for filtering items inside 3 UL's. (Each <ul></ul> will have a unlimited amount of list items.)
The plugin I am using is located at the link below (Quicksand) (along with the documentation & demo).
Quicksand: http://razorjack.net/quicksand/
Documentation http://razorjack.net/quicksand/docs-and-demos.html
The plugin will basically filter the results of the items contained within my <ul></ul>.
I attempted this on a number of occasions, but I am getting no console errors or anything to point me where I am going wrong, and have no idea why its not working.
I have 3 <ul class="column"></ul> tags each with list items below them (3 in this case). I need to be able to filter (and animate) all of them, using the plugin.
I have also made a - JS Fiddle - with my code for you to play with. (Quicksand is included as a 'resource').
The basic structure of my HTML is:
Menu
<!-- On click of these, filter according to 'data-value' -->
<ul id="definations" class="wrapper">
<li><a href="javascript:;">all</a></li>
<li data-value="web"><a href="javascript:;">digital - web</a></li>
<li data-value="iphone"><a href="javascript:;">digital - mobile</a></li>
<li data-value="android"><a href="javascript:;">branding & print</a></li>
<li><a href="javascript:;">event</a></li>
<li><a href="javascript:;">motion</a></li>
</ul>
Content to Filter
<div id="portfolio" class="wrapper">
<ul class="column">
<li class="work item" data-id="id-1" data-type="iphone" data-title="iPhone" data-project="iPhone and Android App" data-year="2012 Project">
<a href="javascript:;"><img src="/css/img/product/work-demo1.png" alt="Omega"/></a>
<a class="view" href="javascript:;"></a>
</li>
<li class="work item" data-id="id-2" data-type="android" data-title="Android" data-project="Rich Web Application" data-year="2012 Project">
<a href="javascript:;"><img src="/css/img/product/work-demo3.png" alt="Description"/></a>
<a class="view" href="javascript:;"></a>
</li>
<li class="work item" data-id="id-3" data-type="web" data-title="Web" data-project="Site Rebrand" data-year="2011 Project">
<a href="javascript:;"><img src="/css/img/product/work-demo2.png" alt="Description"/></a>
<a class="view" href="javascript:;"></a>
</li>
</ul>
<!-- I have 3 of the above columns, I would like the filter to act on all of them -->
<!-- I have only included 1 to keep it short -->
</div>
- Ready: JSFiddle!!
- Update -
I decided to purchase and use the Isotope plugin in the end. The examples on the site are great, and I could achieve the effect I needed.
Very customizable and the perfect plugin for what I needed it for. (If your reading this, its probably what your after).
Check it out at: http://isotope.metafizzy.co/
STATUS: Here is an example of what you want using the live demo below: jsFiddle
I highly recommend this tutorial with live demo that shows an excellent method to use the Quicksand plugin. The comments show below include a couple of tips by me explaining how to have clickable links in the navigation.
The markup is very similar yours except in addition to the Quicksand JavaScript file a separate asset file is required that configures Quicksand, which your jsFiddle is not using.
To be sure, this asset file is the Click Event handler that activates the Quicksand filtering based on your markup layout. For example this jsFiddle shows 1 of 5 ready to use examples from the Quicksand website that are linked in the Examples Section. The separate asset file I was referring to can be considered as the jQuery markup in the JavaScript window.
Also note that jQuery UI Library is required, and is loaded as an asset in the above jsFiddle.
I created a Quicksand Demo with Shadowbox, a lightbox alternative, based on the original demo. It's on the Shadowbox Forum. If you need help with that, visit and post there and I'll be glad to help.