I don't understand why the images vanish when I click on a filter.
The Quicksand script code (located in the file called jquery.custom.js
):
jQuery.noConflict();
jQuery(document).ready(function($){
// Clone applications to get a second collection
var $data = $("#portfolio-items").clone();
//NOTE: Only filter on the main portfolio page, not on the subcategory pages
$('#portfolio-terms ul li').click(function(e) {
$("ul li").removeClass("active");
// Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
var filterClass=$(this).attr('class') //.split(' ').slice(-1)[0];
filterClass = filterClass ? filterClass.split(' ').slice(-1)[0] : '';
if (filterClass == '.all current') {
var $filteredData = $data.find('#portfolio-');
} else {
var $filteredData = $data.find('#portfolio-[data-type=' + filterClass + ']');
}
$("#portfolio-items").quicksand($filteredData, {
duration: 800,
easing: 'swing',
});
$(this).addClass("active");
return false;
});
});
Here you can see the PHP code of portfolio-items and terms: http://snipt.org/Mnp8
Can you help me please?
Thank you!
The $data.find is not searching through attributes directly. What would work is something like replacing
var $filteredData = $data.find('#portfolio-');
with
var $filteredData = $data.find('li[id|="portfolio"]');
That will search through all li's where the id starts with portfolio
The following line is referring the the LI, NOT to the a tag. There is no class on the LI element.
$(this).attr('class') //.split(' ').slice(-1)[0];
assuming that you put the class on the LI element, you might be able to modify change this line from (I'm not sure about this one):
var $filteredData = $data.find('#portfolio-[data-type=' + filterClass + ']')
to:
var $filteredData = $data.find('li.' + filterClass);
Please take a look at
http://jsfiddle.net/bhoover10001/SzjhS/
and see if this is more or less the functionality that you want.
A) You didn't put the class on the LI items that are being clicked on.
<li class="all"><a href="">All</a><span>/</span></li>
<li class="term-4"><a href=""
data-value="term-4" title="View all items filed under Colours">Colours</a> <span>/</span>
</li>
<li class="term-3" >
<a href="" data-value="term-3" title="View all items filed under Fotografie">Fotografie</a> <span>/</span>
</li>
B) data-id is a required element on the LI element of the items that you are displaying. For example:
<li id="portfolio-12" class="term-4 visible" data-id="post-12">
C) The filter class should be the first class in each of the portfolios. You were splitting out the filter class wrong:
filterClass = filterClass ? filterClass.split(' ')[0] : '';
D) Your "ALL" condition was coded wrong:
if (filterClass == 'all')