Filter Blocks is a jquery plugin that creates a matched set of buttons and blocks that can be filtered based on ID. This plugin gets it's data from an external json file and builds a row of buttons corresponding to each json data element as well as a number of blocks (defined in the json file) that are linked to each button. When a button is pre…

ajax-filter.html

<script>
    $(document).ready(function(){
        $(this).filterBlocks({
            parent:'#container',
            filterMethod: 'buttons', //choice is menu or buttons
            allowQsFilter: true,
            /**
             * If allowQsFilter is set to true, you ca add the querystring "?filter="
             * or "&filter=" to allow the filter method to be changed from the url
             * The accepted values are menu or buttons (?filter=menu)
             */
            buttons: {
                buttonTop:'All'
            },
            menu: {
              menuTop:'All'
            },
            items: {
                itemWidth:'150',
                itemHeight:'150'
            },
            animation: {
                method:'show',
                speed:500,
                easing:'easeInOutBack',
                easingPlugin:true,
                easingPluginPath:'assets/js/jquery.easing.1.3.js'
            },
            jsonData : 'assets/ajax/data2.json'
        });
    })
</script>