How to activate JS data-filter when page loads?

Question

I'm working on this site http://fireworkslove.com

I make a nav with different categories (Recommended, News, etc) I want to show "Recommended" category when the page opens ( data-filter=".recommended" ). Right now "Recommended" is visually selected but the filter shows "Show all" category (data-filter=".recommended").

Here is the code of the nav:

<li><a href="#" data-filter=".recommended" class="selected">Recommended</a></li>
<li><a href="#" data-filter=".news">News</a></li>
<li><a href="#" data-filter=".community">Community</a></li>
<li><a href="#" data-filter=".resources">Resources</a></li>
<li><a href="#" data-filter=".extensions">Extensions</a></li>
<li><a href="#" data-filter=".tutorials">Tutorials</a></li>
<li><a href="#" data-filter=".articles">Articles</a></li>
<li><a href="#" data-filter=".influencers">Influencers</a></li>
<li><a href="#" data-filter="*">Show all</a></li>

I think that I must change the code on fireworkslove.com/js/custom.js on the section "Filter - Isotope" (line 78)

Here is the code

//##########################################
// Filter - Isotope 
//##########################################


var $container = $('#filter-container');

$container.imagesLoaded( function(){
    $container.isotope({
        itemSelector : 'figure',
        filter: '*',
        resizable: false,
        animationEngine: 'jquery'
    });
});

// filter buttons

$('#filter-buttons a').click(function(){

    // select current
    var $optionSet = $(this).parents('#filter-buttons');
    $optionSet.find('.selected').removeClass('selected');
    $(this).addClass('selected');

    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
});

I want to activate the data-filter=".recommended" when the page loads.

Hope someone can help me, thanks.

Answer 1

Done: I must change:

filter: '*'

to

filter: '.recommended'

Thanks everybody!