отображение элементов isotope.js
 

при загрузке страницы появляются все элементы, которые при нажатии на фильтр сортируются. как сделать, чтобы фильтр уже был нажат при загрузке страницы, т.е. сразу отображались элементы только для конкретной категории?

deadhunter,
указать нужную категорию в sortBy не пробовали?

это где?

а оно у вас как?

вот джаваскрипт

var fselector = 0;
var work_grid = $("#work-grid, #isotope");

function initWorkFilter(){
    (function($){
     "use strict";
     var isotope_mode;
     if (work_grid.hasClass("masonry")){
         isotope_mode = "masonry";
     } else{
         isotope_mode = "fitRows"
     }
     
     $(".filter").click(function(){
         $(".filter").removeClass("active");
         $(this).addClass("active");
         fselector = $(this).attr('data-filter');
         
         work_grid.isotope({
             itemSelector: '.mix',
             layoutMode: isotope_mode,
             filter: fselector
         });
         return false;
     });
        
     if (window.location.hash) {
         $(".filter").each(function(){
             if ($(this).attr("data-filter") == "." + window.location.hash.replace("#", "")) {
                 $(this).trigger('click');
                 
                 $("html, body").animate({
                     scrollTop: $("#portfolio").offset().top
                 });
                 
             }
         });
     }

     work_grid.imagesLoaded(function(){
         work_grid.isotope({
             itemSelector: '.mix',
             layoutMode: isotope_mode,
             filter: fselector
         });
     });
        
        
    })(jQuery);
}

вот html

<!-- Works Filter -->                    
                    <div class="works-filter font-alt align-center">
                        <a href="#" class="filter " data-filter="*">All works</a>
                        <a href="#" class="filter active" data-filter=".branding">Branding</a>
                        <a href="#" class="filter" data-filter=".design">Design</a>
                        <a href="#" class="filter" data-filter=".photography">Photography</a>
                    </div>                    
                    <!-- End Works Filter -->
                    
                    <!-- Works Grid -->
                    <ul class="works-grid work-grid-3 work-grid-gut clearfix font-alt hover-white hide-titles" id="work-grid">
                        
                        <!-- Work Item (Lightbox) -->
                        <li class="work-item mix photography">
                            <a href="images/portfolio/full-project-1.jpg" class="work-lightbox-link mfp-image">
                                <div class="work-img">
                                    <img src="images/portfolio/projects-1.jpg" alt="Work" />
                                </div>
                                <div class="work-intro">
                                    <h3 class="work-title">Portrait</h3>
                                    <div class="work-descr">
                                        Lightbox
                                    </div>
                                </div>
                            </a>
                        </li>
                        <!-- End Work Item -->

deadhunter,
строка 39

var filter = $(".filter.active").data('filter');
     filter && (fselector = filter);

огромнейшее спасибо. спасаете меня уже в который раз )))

deadhunter,
на всякий случай не ищите атрибуты data c помощью attr, для этого в jquery есть http://api.jquery.com/data/

Тот же вопрос. Как сделась что бы выводилось уже категория по умолчанию. вот код js
/

(function(a,b,c){"use strict";var d=a.document,e=a.Modernizr,f=function(a){return a.charAt(0).toUpperCase()+a.slice(1)},g="Moz Webkit O Ms".split(" "),h=function(a){var b=d.documentElement.style,c;if(typeof b[a]=="string")return a;a=f(a);for(var e=0,h=g.length;e<h;e++){c=g[e]+a;if(typeof b[c]=="string")return c}},i=h("transform"),j=h("transitionProperty"),k={ csstransforms:function(){return!!i},csstransforms3 d:function(){var a=!!h("perspective");if(a){var c=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d="@media ("+c.join("transform-3d),(")+"modernizr)",e=b("<style>"+d+"{#modernizr{ height:3px}}"+"</style>").appendTo("head"),f=b('<div id="modernizr" />').appendTo("html");a=f.height()===3,f.remove(),e .remove()}return a},csstransitions:function(){return!!j}},l;if(e)fo r(l in k)e.hasOwnProperty(l)||e.addTest(l,k[l]);else{e=a.Modernizr={_version:"1.6ish: miniModernizr for Isotope"};var m=" ",n;for(l in k)n=k[l](),e[l]=n,m+=" "+(n?"":"no-")+l;b("html").addClass(m)}if(e.csstransforms) {var o=e.csstransforms3d?{translate:function(a){return" translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+ a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},p=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},g,h={},j;f[c]=d,b.extend(e,f);for(g in e)j=e[g],h[g]=o[g](j);var k=h.translate||"",l=h.scale||"",m=k+l;b.data(a,"is oTransform",e),a.style[i]=m};b.cssNumber.scale=!0,b.cssHooks.scale={set:fun ction(a,b){p(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.scale?d.scale:1}},b.fx.step.scale=function(a) {b.cssHooks.scale.set(a.elem,a.now+a.unit)},b.cssN umber.translate=!0,b.cssHooks.translate={set:funct ion(a,b){p(a,"translate",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.translate?d.translate:[0,0]}}}var q,r;e.csstransitions&&(q={WebkitTransitionProperty :"webkitTransitionEnd",MozTransitionProperty:"tran sitionend",OTransitionProperty:"oTransitionEnd otransitionend",transitionProperty:"transitionend" }[j],r=h("transitionDuration"));var s=b.event,t=b.event.handle?"handle":"dispatch",u;s .special.smartresize={setup:function(){b(this).bin d("resize",s.special.smartresize.handler)},teardow n:function(){b(this).unbind("resize",s.special.sma rtresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",u&&clearTi meout(u),u=setTimeout(function(){s[t].apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartres ize=function(a){return a?this.bind("smartresize",a):this.trigger("smartre size",["execAsap"])},b.Isotope=function(a,c,d){this.element=b(c),thi s._create(a),this._init(d)};var v=["width","height"],w=b(a);b.Isotope.settings={resizable:!0,layoutMod e:"masonry",containerClass:"isotope",itemClass:"is otope-item",hiddenClass:"isotope-hidden",hiddenStyle:{opacity:0,scale:.001},visible Style:{opacity:1,scale:1},containerStyle:{position :"relative",overflow:"hidden"},animationEngine:"be st-available",animationOptions:{queue:!1,duration:800 },sortBy:"original-order",sortAscending:!0,resizesContainer:!0,transf ormsEnabled:!0,itemPositionDataEnabled:!1},b.Isoto pe.prototype={_create:function(a){this.options=b.e xtend({},b.Isotope.settings,a),this.styleQueue=[],this.elemCount=0;var c=this.element[0].style;this.originalStyle={};var d=v.slice(0);for(var e in this.options.containerStyle)d.push(e);for(var f=0,g=d.length;f<g;f++)e=d[f],this.originalStyle[e]=c[e]||"";this.element.css(this.options.containerStyle) ,this._updateAnimationEngine(),this._updateUsingTr ansforms();var h={"original-order":function(a,b){return b.elemCount++,b.elemCount},random:function(){retur n Math.random()}};this.options.getSortData=b.extend( this.options.getSortData,h),this.reloadItems(),thi s.offset={left:parseInt(this.element.css("padding-left")||0,10),top:parseInt(this.element.css("paddi ng-top")||0,10)};var i=this;setTimeout(function(){i.element.addClass(i. options.containerClass)},0),this.options.resizable &&w.bind("smartresize.isotope",function(){i.resize ()}),this.element.delegate("."+this.options.hidden Class,"click",function(){return!1})},_getAtoms:fun ction(a){var b=this.options.itemSelector,c=b?a.filter(b).add(a. find(b)):a,d={position:"absolute"};return c=c.filter(function(a,b){return b.nodeType===1}),this.usingTransforms&&(d.left=0,d .top=0),c.css(d).addClass(this.options.itemClass), this.updateSortData(c,!0),c},_init:function(a){thi s.$filteredAtoms=this._filter(this.$allAtoms),this ._sort(),this.reLayout(a)},option:function(a){if(b .isPlainObject(a)){this.options=b.extend(!0,this.o ptions,a);var c;for(var d in a)c="_update"+f(d),this[c]&&this[c]()}},_updateAnimationEngine:function(){var a=this.options.animationEngine.toLowerCase().repla ce(/[ _\-]/g,""),b;switch(a){case"css":case"none":b=!1;break; case"jquery":b=!0;break;default:b=!e.csstransition s}this.isUsingJQueryAnimation=b,this._updateUsingT ransforms()},_updateTransformsEnabled:function(){t his._updateUsingTransforms()},_updateUsingTransfor ms:function(){var a=this.usingTransforms=this.options.transformsEnab led&&e.csstransforms&&e.csstransitions&&!this.isUs ingJQueryAnimation;a||(delete this.options.hiddenStyle.scale,delete this.options.visibleStyle.scale),this.getPositionS tyles=a?this._translate:this._positionAbs},_filter :function(a){var b=this.options.filter===""?"*":this.options.filter ;if(!b)return a;var c=this.options.hiddenClass,d="."+c,e=a.filter(d),f =e;if(b!=="*"){f=e.filter(b);var g=a.not(d).not(b).addClass(c);this.styleQueue.push ({$el:g,style:this.options.hiddenStyle})}return this.styleQueue.push({$el:f,style:this.options.vis ibleStyle}),f.removeClass(c),a.filter(b)},updateSo rtData:function(a,c){var d=this,e=this.options.getSortData,f,g;a.each(funct ion(){f=b(this),g={};for(var a in e)!c&&a==="original-order"?g[a]=b.data(this,"isotope-sort-data")[a]:g[a]=e[a](f,d);b.data(this,"isotope-sort-data",g)})},_sort:function(){var a=this.options.sortBy,b=this._getSorter,c=this.opt ions.sortAscending?1:-1,d=function(d,e){var f=b(d,a),g=b(e,a);return f===g&&a!=="original-order"&&(f=b(d,"original-order"),g=b(e,"original-order")),(f>g?1:f<g?-1:0)*c};this.$filteredAtoms.sort(d)},_getSorter:fu nction(a,c){return b.data(a,"isotope-sort-data")[c]},_translate:function(a,b){return{translate:[a,b]}},_positionAbs:function(a,b){return{left:a,top:b} },_pushPosition:function(a,b,c){b=Math.round(b+thi s.offset.left),c=Math.round(c+this.offset.top);var d=this.getPositionStyles(b,c);this.styleQueue.push ({$el:a,style:d}),this.options.itemPositionDataEna bled&&a.data("isotope-item-position",{x:b,y:c})},layout:function(a,b){var c=this.options.layoutMode;this["_"+c+"Layout"](a);if(this.options.resizesContainer){var d=this["_"+c+"GetContainerSize"]();this.styleQueue.push({$el:this.element,style:d} )}this._processStyleQueue(a,b),this.isLaidOut=!0}, _processStyleQueue:function(a,c){var d=this.isLaidOut?this.isUsingJQueryAnimation?"anim ate":"css":"css",f=this.options.animationOptions,g =this.options.onLayout,h,i,j,k;i=function(a,b){b.$ el[d](b.style,f)};if(this._isInserting&&this.isUsingJQu eryAnimation)i=function(a,b){h=b.$el.hasClass("no-transition")?"css":d,b.$el[h](b.style,f)};else if(c||g||f.complete){var l=!1,m=[c,g,f.complete],n=this;j=!0,k=function(){if(l)return;var b;for(var c=0,d=m.length;c<d;c++)b=m[c],typeof b=="function"&&b.call(n.element,a,n);l=!0};if(this .isUsingJQueryAnimation&&d==="animate")f.complete= k,j=!1;else if(e.csstransitions){var o=0,p=this.styleQueue[0],s=p&&p.$el,t;while(!s||!s.length){t=this.styleQue ue[o++];if(!t)return;s=t.$el}var u=parseFloat(getComputedStyle(s[0])[r]);u>0&&(i=function(a,b){b.$el[d](b.style,f).one(q,k)},j=!1)}}b.each(this.styleQueu e,i),j&&k(),this.styleQueue=[]},resize:function(){this["_"+this.options.layoutMode+"ResizeChanged"]()&&this.reLayout()},reLayout:function(a){this["_"+this.options.layoutMode+"Reset"](),this.layout(this.$filteredAtoms,a)},addItems:fu nction(a,b){var c=this._getAtoms(a);this.$allAtoms=this.$allAtoms. add(c),b&&b(c)},insert:function(a,b){this.element. append(a);var c=this;this.addItems(a,function(a){var d=c._filter(a);c._addHideAppended(d),c._sort(),c.r eLayout(),c._revealAppended(d,b)})}