The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Jquery Quicksand + Easing to Filter Portfolio List do not activate

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #210370
    Kevin Mamaqi

    I’m using Jquery Quicksand ( and Jquery Easing ( 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:

    This is a PEN:

    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 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
            // 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
            // 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
                // The duration for the animation
                duration: 750,
                // The easing effect when animating
                easing: 'easeInOutCirc',
                // Height adjustment set to dynamic
                adjustHeight: 'dynamic'
    }); // END OF DOCUMENT

    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.

    Kevin Mamaqi

    Thank you Alen,

    I still can’t get it to work, could you take a look please?


    As an alternative to (possibly conflicting?) jQuery filtering plugins, maybe this plain JavaScript content filter could be an option

    Kevin Mamaqi

    Thank you guys,

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.