Isotop gefaltet (Elemente überlappen)

Question

Ich habe Stack-Überlauf für eine Lösung gelesen, kann aber nicht finden.

(Bild in voller Größe bei http://i.imgur.com/hrcDg.png)

Wenn ich die Seite es so, dass hier

sieht laden ist die Website (Beta)

http://e-gimnazija.hostoi.com/test/site/index.html

Wenn Sie drücken Sie alle es sich entfaltet, vielleicht kann ich es lösen, wenn es automatisch beim Start entfaltet

Answer 1

Das Problem ist, dass, wenn Sie .isotope die Bilder laufen noch nicht geladen, so dass das Plugin kann ihre Größe nicht berechnen ..

Sie haben einige verschiedene Optionen zur Auswahl

1. starten Isotop, nachdem die Bilder haben .. $(window).load(function(){/*init plugin here*/})
2. Verwenden Sie die imagesLoaded Plugin geladen : http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
3. Aufruf reLayout einmal die Bilder $(window).load(function(){$('#thumbs').isotope('reLayout');});
4. wenn die li Elemente Größe fixiert geladen werden, dann geben sie Dimensionen durch CSS und isotope wird sie abholen ..

Answer 2

Ich reparierte es mit jquery :

Dies wartet auf das Laden der ganzen Seite und lädt zuletzt das Isotopenskript. Im Folgenden habe ich eine vollständigere Lösung mit einer "funktionierenden" Benachrichtigung und einem Spinner, bis alles geladen ist. Der Spinner ist von font-awesome Symbolen ...

<div class="container wrapper"> 
    <div class="inner_content"> 
     <div class='working' > 
      <h2>working... <i class="icon-spinner icon-spin icon-large"></i></h2> 
     </div> 
    </div> 
</div> 

<script type='text/javascript' > 
    $(window).load(function() { 
     $.getScript('/js/jquery.isotope.min.js', function() { 
      $('.working').fadeOut(); 
     }); 
    }); 
</script> 

Sie können mein Arbeitsbeispiel an sehen: http://ericavhay.com/painting/portfolio