H'Venus Album Sandbox

by Troy Alford

HTML

<ul class="albums">
</ul>

SCSS

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
}
ul.albums {
    display: inline-block;
    list-style: none;
    margin: 0; padding: 0;
    width: 515px;

    > li.album {
        display: inline-block;
        margin: 5px; padding: 3px;
        border: 1px solid #ccc;
        height: 138px; width: 93px;
        overflow: hidden;
        position: relative;
        
        img.thumbnail { 
            position: absolute;
            clip: rect(0px, 85px, 130px, 0px);
        }
        
        > span.name {
            display: none;
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: #268;
            color: #fff;
            text-align: center;
            margin: 0 3px 3px 3px;
        }
        &:hover > span.name { display: inline-block; }
    }
}

JavaScript

var username = 'HVenusPromotions';
var url = {
    albums: function(username) {
        return 'http://graph.facebook.com/' + username + '/albums';
    },
    album_cover: function(album_id) {
        return 'http://graph.facebook.com/' + album_id + '/picture?type=small';
    },
    photos: function(album_id) {
        return 'http://graph.facebook.com/' + album_id + '/photos';
    }
};
var albums, $albums = $('ul.albums');
$.ajax({ 
    url: url.albums(username),
    async: false,
    success: function (result) { albums = result; console.log(result); }
});
$.each(albums.data, function(ix, album) {
    var $li = $('<li class="album"></li>');
    var $a = $('<a href="' + url.photos(album.id) + '" class="lightbox"></a>').appendTo($li);
    var $img = $('<img src="' + url.album_cover(album.id) + '" class="thumbnail" />').appendTo($a);
    var $span = $('<span class="name">' + album.name + '</span>').appendTo($li);
    $li.appendTo($albums);
});