JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="latest-picasaweb-images">
    <ul></ul>
</div>

CSS

#latest-picasaweb-images {
    overflow: hidden;
}

#latest-picasaweb-images ul {
    overflow: hidden;
}

#latest-picasaweb-images ul li {
    float: left;
    margin: 5px;
}

JavaScript

$(document).ready(function() {
    $.getJSON("http://picasaweb.google.com/data/feed/base/user/109024920426177957636/?kind=photo&access=public&alt=json&callback=?",
    function(data) {
        var target = "#latest-picasaweb-images ul";
        for (i = 0; i <= 9; i = i + 1) { 
            var pic = data.feed.entry[i].media$group;
            var liNumber = i + 1;
            var thumbSize = 1;
            $(target).append("<li class='no-" + liNumber + "'><a title='" + pic.media$description.$t + "' href='" + pic.media$content[0].url + "'><img src='" + pic.media$thumbnail[thumbSize].url + "' /></a></li>");
        }
    });
});