2013-10-01 3 views
0

Я ищу для загрузки изображений с FlickrSet, в контейнер для загрузки и масштабирования с помощью масонства.JQuery: Flickr + Масонство + ImagesLoaded. Как слить все?

Я вижу, что высота контейнера каждая равно 0. Я думаю, что мне нужно использовать imagesLoaded, но кажется, что imagesLoaded оленьей кожи»работы. Проще говоря, высота контейнера равна 0.

Это код, кто-то может мне помочь?

var $gallery = $('#gallery'); 
if ($gallery.length!=0) { 
    var url1 = 'http://api.flickr.com/services/feeds/photoset.gne?set='; 
    var url3 = '&nsid='; 
    var url5 = '&lang=en-us&format='; 
    var url7 = '&jsoncallback=?'; 
    var set  = 'xxxxxx'; 
    var nsid = '[email protected]'; 
    var format = 'json'; 
    var src; 
    var finalUrl  = url1 + set + url3 + nsid + url5 + format + url7; 
    $.getJSON(finalUrl,function(data){ 
     $.each(data.items, function(i,item){ 
      $('<img/>').attr({src : item.media.m.replace('_m.','.')}).appendTo($gallery); 
     }); 
    }); 
      $gallery.imagesLoaded(function() { 
       $gallery.masonry(); 
      }); 
} // if 

ответ

1

Вы должны запускать masonry и imagesLoaded методы внутри AJAX обратного вызова (после изображений были добавлены к DOM)

$.getJSON(finalUrl,function(data){ 
     $.each(data.items, function(i,item){ 
      $('<img/>').attr({src : item.media.m.replace('_m.','.')}).appendTo($gallery); 
     }); 

     $gallery.imagesLoaded(function() { 
      $gallery.masonry(); 
     }); 
    }); 
+0

совершенен! Один вопрос: если бы я хотел получить эффект fadein, я предполагаю, что мне нужно добавить его после $ ('') .... append line? – sineverba

+0

Возможно, вы захотите сделать это внутри 'imagesLoaded', иначе может произойти замирание до загрузки изображения. –

Смежные вопросы