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

[deadhunter]

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

[рони]

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

[deadhunter]

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

это где?

[рони]

это где?

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

[deadhunter]

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

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

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]

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

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

[рони]

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

[ooopsalala]

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

[ooopsalala]

(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={leftarseInt(this.element.css("padding-left")||0,10),toparseInt(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)})}