Why Do the Images Vanish in jQuery Quicksand?

Question

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!

Brian Hoover · Accepted Answer · 2011-11-04T17:01:48.117

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')

Thank you Brian but it doesn't work! :( I think that the problem is in the default script that you can see now when you click on a filter term. But I don't know how to remove this old script. Probably removing it could work the Quicksand script. — humanbeing, Nov 04 '11 at 13:30
Could you let me know what's not working? I just loaded your site back up in my Firefox browser and it appears to be close. — Brian Hoover, Nov 04 '11 at 14:30

Why Do the Images Vanish in jQuery Quicksand?

1 Answers1