using a filter to not show all images using isotope on page load

[holyrolle]

I have the following html (put html code which is relevant) and Jquery code (jquery code to long to input) which creates an isotype filter within my website on gallery images. Its working fine but when the page loads it shows all the images and i only want it to show the design images. I thought i would have to ammend the filter in the jquery code from '*' to '.design' but its not working. Any ideas thanks in advanceHTML\[code\]<section id="options" class="clearfix"> <ul id="filters" class="option-set clearfix" data-option-key="filter"> <li><a href="http://stackoverflow.com/questions/15837625/#filter" data-option-value="http://stackoverflow.com/questions/15837625/*" class="selected">ALL</a></li> <li><a href="http://stackoverflow.com/questions/15837625/#filter" data-option-value="http://stackoverflow.com/questions/15837625/.design" class="selected">MODELLING</a></li> <li><a href="http://stackoverflow.com/questions/15837625/#filter" data-option-value="http://stackoverflow.com/questions/15837625/.website">COMMERCIAL</a></li> <li><a href="http://stackoverflow.com/questions/15837625/#filter" data-option-value="http://stackoverflow.com/questions/15837625/.photoshop">DANCE</a></li> <li><a href="http://stackoverflow.com/questions/15837625/#filter" data-option-value="http://stackoverflow.com/questions/15837625/.tvfilm">TV & FILM</a></li> </ul> </section> </div> </div> <div class="row"> <div class="portfolio_container clearfix"> <div class="element design span4"> <div class="portfolio_img"> <img src="http://stackoverflow.com/questions/15837625/images/portfolio_img_1.jpg" class="pf_img" alt="img"/> <article class="portfolio_link"> <a href="http://stackoverflow.com/questions/15837625/images/portfolio_img_1.jpg" class="example7 zoom" title="<h3>BRAND</h3> Proin fringilla nunc tristique nulla a mattis. Proin fringilla turpis sit amet nunc blandit vehicula. Nulla Integer lacinia tristique nulla a mattis. Proin fringilla turpis sit amet nunc blandit vehicula. Nulla quis purus ut erat luctus congue. Vivamus consequat congue tristiqueDonec nec ligula turpis"> <img src="http://stackoverflow.com/questions/15837625/images/zoom_icon.png" alt="img"/> </a> </article> </div> <article class="content"> <!--<span class="strip"></span>!--> <h4>BRAND?</h4> <!--<p>Proin fringilla</p>!--> </article> </div> <div class="element website span4"> <div class="portfolio_img"> <img src="http://stackoverflow.com/questions/15837625/images/portfolio_img_2.jpg" class="pf_img" alt="img"/> <article class="portfolio_link"> <a href="http://stackoverflow.com/questions/15837625/images/portfolio_img_2.jpg" class="example7 zoom" title="<h3>BLACKBERRY</h3> Turpis sit amet nunc tristique nulla a mattis. Proin fringilla turpis sit amet nunc blandit vehicula. Nulla Integer lacinia tristique nulla a mattis. Proin fringilla turpis sit amet nunc blandit vehicula. Nulla quis purus ut erat luctus congue. Vivamus consequat congue tristiqueDonec nec ligula congue"> <img src="http://stackoverflow.com/questions/15837625/images/zoom_icon.png" alt="img"/> </a> </article> </div>JQUERY // ====================== Filtering ====================== _filter : function( jQueryatoms ) { var filter = this.options.filter === '' ? '*' : this.options.filter; if ( !filter ) { return jQueryatoms; } var hiddenClass = this.options.hiddenClass, hiddenSelector = '.' + hiddenClass, jQueryhiddenAtoms = jQueryatoms.filter( hiddenSelector ), jQueryatomsToShow = jQueryhiddenAtoms; if ( filter !== '*' ) { jQueryatomsToShow = jQueryhiddenAtoms.filter( filter ); var jQueryatomsToHide = jQueryatoms.not( hiddenSelector ).not( filter ).addClass( hiddenClass ); this.styleQueue.push({ jQueryel: jQueryatomsToHide, style: this.options.hiddenStyle }); } this.styleQueue.push({ jQueryel: jQueryatomsToShow, style: this.options.visibleStyle }); jQueryatomsToShow.removeClass( hiddenClass ); return jQueryatoms.filter( filter ); },\[/code\]