Applying a Masonry layout to a Flickr feed

Question

I have built a Flickr photo feed using ajax (jQuery) and would like to apply a masonry layout to the images.

Here is the page http://flickrfeed.memonamadi.com/ (click on a city button to get the feed).

I already tried to apply the Masonry plugin by Desandro using jQuery but it did not apply to the thumbnails.

Can the plugin be used on a feed and how? Or is there a simpler css solution to resize all the thumbnails to the same size and align them without shrinking them?

score 0 · Answer 1 · edited May 23 '17 at 12:05

Without having a good look at your code, it's hard to really be able to point you in the right direction. Maybe you could make us a jsfiddle so we can see an example of the code you are trying to use.

I will say, I have been trying to do something similar for a few days and without much success until today. I could get the images to load from flickr, but they would not adhere to the masonry grid.

Here is the code I eventually came up with to pull in my flickr feed and apply masonry to its layout, using imagesLoaded.js per the Masonry documentation:

$(document).ready(function() {
     var $gallery = $('#FlickrImages');                                            
    //Flickr Integration
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=[YOUR-FLICKR-USER-ID]&lang=en-us&format=json&jsoncallback=?", function(data){
        $.each(data.items, function(i,item){
            if(i<=9999){
                $("<img/>").attr("src", item.media.m).appendTo($gallery)
                .wrap("<a class='gallery-image' href='" + item.link + "' target='_blank' title='Flickr'></a>");
            }
        });
       $gallery.imagesLoaded( function() {
         $gallery.masonry();
        });            
    });                     
});

And my html is simply:

<div id="FlickrImages"></div>

After hours of poking around online, this was the only thing I found that was able to help solve my issue. My problem ended up being that I was originally trying to add this section of the above code:

$container.imagesLoaded(function() { $container.masonry(); });

to its own $(document).ready(function()

once I moved it into the same function as my flickr feed jSON function, masonry worked perfectly. I figured that out by reading this thread:

jquery-flickr-masonry-imagesloaded-how-merge-all

Applying a Masonry layout to a Flickr feed

1 Answers1