Jquery Quicksand + Easing to Filter Portfolio List do not activate

[Kevin Mamaqi]

I’m using Jquery Quicksand (http://razorjack.net/quicksand/) and Jquery Easing (http://razorjack.net/quicksand/) to create a filterable portfolio in my website, although the data-type and class names seems to be ok, it doesn’t work at all.

Website link: http://www.kevinmamaqi.com/portfolio/

This is a PEN: http://codepen.io/kevinmamaqi/pen/yYEqOz

This is the code to run the plugins:

jQuery(document).ready(function() {

    function portfolio_quicksand() {

    // Setting up our variables
    var $filter;
    var $container;
    var $containerClone;
    var $filterLink;
    var $filteredItems

    // Set our filter
    $filter = $('.filter li.active.filtros a').attr('class');

    // Set our filter link
    $filterLink = $('.filter li.filtros a');

    // Set our container
    $container = $('ul.filterable-grid');

    // Clone our container
    $containerClone = $container.clone();

    // Apply our Quicksand to work on a click function
    // for each of the filter li link elements
    $filterLink.click(function(e) 
    {
        // Remove the active class
        $('.filter li').removeClass('active');

        // Split each of the filter elements and override our filter
        $filter = $(this).attr('class').split(' ');

        // Apply the 'active' class to the clicked link
        $(this).parent().addClass('active');

        // If 'all' is selected, display all elements
        // else output all items referenced by the data-type
        if ($filter == 'all') {
            $filteredItems = $containerClone.find('li'); 
        }
        else {
            $filteredItems = $containerClone.find('li[data-type~=' + $filter + ']'); 
        }

        // Finally call the Quicksand function
        $container.quicksand($filteredItems, 
        {
            // The duration for the animation
            duration: 750,
            // The easing effect when animating
            easing: 'easeInOutCirc',
            // Height adjustment set to dynamic
            adjustHeight: 'dynamic'
        });
    });
}

}); // END OF DOCUMENT

[Alen]

Hi @KevinMamaqi

I’ve tried playing with the code and couldn’t get it to work. So I ended up trying to create a reduced case for you. Hopefully you can expand on this and incorporate it into your design.

I decided to use Isotope.js instead of Quicksand. Looking at the GitHub seems like it hasn’t been updated in awhile.

http://codepen.io/alenabdula/pen/MaXxVG

[Kevin Mamaqi]

Thank you Alen,

I still can’t get it to work, could you take a look please? http://www.kevinmamaqi.com/portfolio/

[Beverleyh]

As an alternative to (possibly conflicting?) jQuery filtering plugins, maybe this plain JavaScript content filter could be an option http://fofwebdesign.co.uk/template/_testing/filter/filter-single-js.htm

[Kevin Mamaqi]

Thank you guys,

I managed to solve it with isotope, enqueuing scripts properly.

[Author]

Posts