2013-10-07 4 views
18

Ich versuche, Isotop auf dieser Website einzurichten, muss es das Layout behandeln und ich muss in der Lage sein, Elemente an den Container anzuhängen.Isotope Jquery Plugin Layout Probleme

Das Problem ist, dass es nicht die Bilder scheint richtig initialisiert werden, hier ist, wie ich es init:

$(document).ready(function(){ 

    var $container = $('#container'); 
    $container.isotope({ 
      masonry: { 
      columnWidth: 400, 
      gutterWidth: 10 
     }, 
     filter: '*', 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: true 
     }, 
     resizesContainer: true, 
    }); 

    load_more(); 
}); 

Die Bilder sind völlig unberührt von den Mauer- und Optionen, und wenn ich angeben „Breite“ in Mein CSS Ich habe Probleme beim Laden.

load_more Vorformen ein Ajax-Aufruf und auf Erfolg ruft diese Funktion mit den Daten zurückgegeben:

function data_loaded(data) { 

    var newItems = ""; 
    for (var i = 0; i < data['posts'].length; i++) { 
     newItems += '<div class="item" ><img class="gallery_img" src="'+data['posts'][i]['images'][0]['path']+'" /></div>'; 
    } 

    /* append images*/ 
    var $newItemsObj = $(newItems); 
    $('#container').isotope('insert', $newItemsObj); 
} 

Die Seite ist http://www.hotchinesebabes.com/ Die Seite für die Arbeit sicher ist, gibt es keine Nacktbilder

Es scheint auch, dass die Website eine Aktualisierung benötigt, um richtig zu laden, ich denke, die Bilder werden ein zweites Mal gefangen, so dass es das erste Mal aufgrund der auslösenden Isotope vor dem Laden des Bildes fehlschlägt?

+8

Wen interessiert der Domainname? Site ist sicher für die Arbeit, wenn ich es Hallo Kitty-Abenteuer nannte, wäre es in Ordnung? –

+8

Ja, ja, es gibt keine Nackt- oder Halbnacktbilder auf dieser Website. –

+32

Ich mag es zu wissen, welche Art von Job Sie haben, wenn man bedenkt, dass es nicht in Ordnung ist, voll angezogene Frauen zu betrachten. –

Antwort

6

Isotop funktioniert nicht, da Ihre Bilder noch nicht geladen sind, daher sind die Breite und Höhe der Bilder 0. Verwenden Sie https://github.com/desandro/imagesloaded oder korrigieren Sie die Höhe und Breite Ihrer Bilder mit CSS.

+0

Vielen Dank, dass Sie mich in die richtige Richtung weisen –