I've been playing around with a website for the past couple of days and I have successfully implemented the jquery.quicksand plugin to organize my portfolio entries. However, I've run into an issue when selecting the 'all' filter.
If anyone could spare a moment to help me out, I would greatly appreciate it.
To better understand the problem, please visit this link: > and click on the 'all' filter.
Here is the relevant HTML code:
<div id="filter" class="grid_12 clearfix">
<h4 class="fl">Filter »</h4>
<ul class="fl type">
<li title="all">All</li>
<li title="print">Print</li>
<li title="logo">Logo</li>
<li title="web">Websites</li>
</ul>
</div>
<div class="clearfix"></div>
<div id="portfolio">
<div data-type="web" data-id="1" class="grid_4">
<a href="assets/img/portfolio/moo02.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo02.jpg" alt="image1"></a>
<p>small caption</p>
</div>
<div data-type="print" data-id="2" class="grid_4">
<a href="assets/img/portfolio/moo04.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo04.jpg" alt="image2"></a>
<p>small caption</p>
</div>
<div data-type="logo" data-id="3" class="grid_4">
<a href="assets/img/portfolio/moo11.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo11.jpg" alt="image3"></a>
<p>small caption</p>
</div>
<div data-type="logo" data-id="4" class="grid_4">
<a href="assets/img/portfolio/moo13.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo13.jpg" alt="image4"></a>
<p>small caption</p>
</div>
<div data-type="print" data-id="5" class="grid_4">
<a href="assets/img/portfolio/moo02.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo02.jpg" alt="image1"></a>
<p>small caption</p>
</div>
<div data-type="print" data-id="6" class="grid_4">
<a href="assets/img/portfolio/moo04.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo04.jpg" alt="image2"></a>
<p>small caption</p>
</div>
<div data-type="web" data-id="7" class="grid_4">
<a href="assets/img/portfolio/moo11.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo11.jpg" alt="image3"></a>
<p>small caption</p>
</div>
<div data-type="web" data-id="8" class="grid_4">
<a href="assets/img/portfolio/moo13.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo13.jpg" alt="image4"></a>
<p>small caption</p>
</div>
</div><!-- .portfolio -->
Here is the relevant JavaScript method call:
// DOMContentLoaded
$(function() {
// bind radiobuttons in the form
var $filterPortfolio = $('#filter li');
// get the first collection
var $portfolio = $('#portfolio');
// clone applications to get a second collection
var $data = $portfolio.clone();
// attempt to call Quicksand on every form change
$filterPortfolio.click(function(e) {
if ($(this).attr('title') == 'all') {
var $filteredData = $data.find('div.grid_4');
} else {
var $filteredData = $data.find('.grid_4[data-type=' + $(this).attr('title') + ']');
}
// finally, call quicksand
$portfolio.quicksand($filteredData, {
duration: 800,
easing: 'swing',
adjustHeight: 'auto'
});
});
});