Additional Functions to Joel Sutherland's filterable.js
<p>I'll try to explain this one as best as possible. I'm trying to create a portfolio using an augmented version of Joel Sutherland's filterable.js (Found here: <a href="http://www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours" rel="nofollow">http://www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours</a>). So on load, I want there to be a translucent white box over each image that on hover fades away. I also want to use the filters to accomplish the same thing. When a filter is selected, the white box fades away over the items with that filter selected. The others remain the same. The only thing it seems I'm able to do with the show/hide functions in the javascript is to change opacity of the entire li. I could put the white box behind the images but then unfiltered, they would all appear in full color.</p>

<p>I created a fiddle but it doesn't seem to use the filterable javascript correctly. <a href="http://jsfiddle.net/7QcUn/" rel="nofollow">http://jsfiddle.net/7QcUn/</a></p>

<p>Here's the javascript:</p>

<pre><code>(function($) {
    $.fn.filterable = function(settings) {
        settings = $.extend({
            useHash: true,
            animationSpeed: 1000,
            show: {opacity: 1},
            hide: {opacity: 0.5},
            useTags: true,
            tagSelector: '#portfolio-filter a',
            selectedTagClass: 'current',
            allTag: 'all'
        }, settings);

        return $(this).each(function(){

            /* FILTER: select a tag and filter */
            $(this).bind("filter", function( e, tagToShow ){
                if(settings.useTags){
                    $(settings.tagSelector).removeClass(settings.selectedTagClass);
                    $(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
                }
                $(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
            });

            /* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
            $(this).bind("filterportfolio", function( e, classToShow ){
                if(classToShow == settings.allTag){
                    $(this).trigger("show");
                }else{

                    $(this).trigger("show", [ '.' + classToShow ] );
                    $(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );

                }
                if(settings.useHash){
                    location.hash = '#' + classToShow;
                }
            });

            /* SHOW: show a single class*/
            $(this).bind("show", function( e, selectorToShow ){
                $(this).children(selectorToShow).animate(settings.show, settings.animationSpeed);
            });

            /* SHOW: hide a single class*/
            $(this).bind("hide", function( e, selectorToHide ){
                $(this).children(selectorToHide).animate(settings.hide, settings.animationSpeed);   
            });

            /* ============ Check URL Hash ====================*/
            if(settings.useHash){
                if(location.hash != '')
                    $(this).trigger("filter", [ location.hash ]);
                else
                    $(this).trigger("filter", [ '#' + settings.allTag ]);
            }

            /* ============ Setup Tags ====================*/
            if(settings.useTags){
                $(settings.tagSelector).click(function(){
                    $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);

                    $(settings.tagSelector).removeClass('current');
                    $(this).addClass('current');
                });
            }
        });
    }
})(jQuery);


$(document).ready(function(){

    $('#portfolio-list').filterable();

});
</code></pre>
