Isotope Imagegrid soll den ganzen viewport ausfüllen!!

[mikdoe]

In der FAQ steht noch was:

How do I fix overlapping item elements?

If your layout has images, you probably need to use imagesLoaded.

Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, web fonts, embedded buttons. To fix it, you need to initialize or layout after all the items have their proper size.

Das scheint mir zwar nicht die Frage zu sein aber der letzte Satz, dass erst initialisiert werden soll, nachdem das Layout fertig ist wäre vielleicht ein Hinweis.
Dafür könntest du den Code mal in $(window).load(function(){ }) setzen, das wartet auf das Laden der Bilder. Obwohl die Beispielseite das auch nicht macht, zumindest nicht im Seitenquelltext.

 

[SmokeTM]

ne geht irgendwie auch nicht -.- man das kann echt ned sein ...
das wird von der imagesloaded.js übernommen das bruacht man nicht machen.

 

[mikdoe]

Sonst frag doch mal gerade bei Stack nach: http://stackoverflow.com/users/182183/desandro?tab=answers

Ergebnis würde mich interessieren.

 

[SmokeTM]

Kriegt man nur support wenn man gekauft hat und das hab ich nicht *kotz*
Danke trotzdem für deine bemühungen !

Ich hoffe es melden sich noch andere Leute ...

 

[kkapsner]

Auf der Beispielseite steht im Quelltext doch, wie es gemacht wurde... das ist nicht Teil von dem Isotope-Teil:

        /*******************************************
         *********** Isotope / PORTFOLIO ***********
         *******************************************/

    jQuery(window).load(function(){

            var portfolio_ctn = jQuery(".portfolio-items");

            portfolio_ctn.isotope({
                // options
                itemSelector : '.item',
                layoutMode : 'fitRows',
            });
            

            function getColNum(){
                var winWidth = jQuery(window).width(), colNum = 1;

                if(winWidth > 1200){
                    colNum = 5;
                } else if(winWidth > 900){
                    colNum = 4;
                } else if(winWidth > 600){
                    colNum = 3;
                } else if(winWidth > 300){
                    colNum = 1;
                }     

                return colNum;

            }    


            function setCols(){
                var winWidth = jQuery(window).width(),
                        colNum = getColNum(),
                        colWidth = Math.floor(winWidth / colNum) + 'px';
                portfolio_ctn.find('.item').each(function(){
                    jQuery(this).css("width", colWidth);
                });
            }


            function reLayoutItems(){
                setCols();
                portfolio_ctn.isotope('reLayout');
            }


            portfolio_ctn.imagesLoaded(function(){
                reLayoutItems();
            });


            jQuery(window).bind('resize', function(){
                reLayoutItems();
            });
            
            jQuery('#filters a').click(function(){
                var selector = jQuery(this).attr('data-filter');
                jQuery('a.active').removeClass('active');
                jQuery(this).addClass('active');

                portfolio_ctn.isotope({ filter: selector });
                return false;
            });

- hab' mal alles entfernt, was meiner Meinung nach nichts mit dem Umsortieren zu tun hat.

 

[SmokeTM]

LOL wie geil ! du meinst ich brauch das jetzt nur mehr zu kopieren?

Danke ich muss mal schauen ob das jetzt funktioniert

 

[kkapsner]

Du musst wahrscheinlich die Zahlen noch etwas anpassen und v.A. die Selektoren, aber dann bin ich der Meinung, dass es gehen sollte...

 

[SmokeTM]

Bitte schau nochmal drüber ich bin kurz davor aber irgendwie funzt das imageload noch nicht richtig bitte bitte
Die Bilder überlappen noch teilweise -.- aber es geht schon fast vielen dank für die hilfe !!

 

[kkapsner]

Du verwendest anscheinend eine andere Version von Isotope, denn bei dir kommt die Warnung

"no such method 'reLayout' for isotope instance"

...
Versuche statt dessen mal "layout".

 

[SmokeTM]

Danke du warst mir so eine Hilfe genau das wars!!! Weiss nicht wie ich dir das zurückgeben kann bist der Beste ich bin so happy das das jetzt geht

 

[j-l-n]

Weiss nicht wie ich dir das zurückgeben kann

Indem du einfach hier im Forum aktiv bleibst. Und vielleicht kannst du ja auch anderen Usern hier helfen, dann lernst du nämlich auch selber immer weiter dazu

 

[kkapsner]

Danke du warst mir so eine Hilfe genau das wars!!!

Bitte - gern geschehen.