facebook albums

jQuery display facebook albums

by Robin Li

HTML

<div id='photoAlbum'></div>

CSS

#photoAlbum {
    width:808;
    height:202;
}
.photoFrame {
    float: left;
    z-index: 1;
    width:202px;
    height:202px;
    overflow: hidden;
    margin:0px;
}
.photoImage {
    border:1px solid #cccccc;
    width:196px;
    height:196px;
    background-size: cover;
    background-position: 50% 25%;
    -webkit-transition-property: width, height;
    -webkit-transition-duration: 500ms;
    background-color: transparent;
    position: relative;
    z-index: 2;
    display: block;
}
a.photoLink {
}

JavaScript

$.extend({
    getUrlVars: function () {
        var vars = [],
            hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    },
    getUrlVar: function (name) {
        return $.getUrlVars()[name];
    }
});

$(function () {
    var pageName = $.getUrlVar('page');
    if (pageName == null) pageName = 'ginoy0907';
    
    var maxphoto = $.getUrlVar('num');
    if (maxphoto == null) maxphoto = 24;
    
    var image_size = 196;
    var addedphotos = 0;

    $.ajax({
        url: 'http://graph.facebook.com/' + pageName + '/albums?fields=photos',
        dataType: 'jsonp',
        success: function (data) {

            $.each(data.data, function (k1, album) {

                if (addedphotos > maxphoto) return true;

                var pictureArray = album.photos.data.reverse();

                $.each(pictureArray, function (k2, pictureObject) {

                    addedphotos++;
                    if (addedphotos > maxphoto) return true;

                    var imageArray = pictureObject.images;
                    var added = false;
                    $.each(imageArray, function (k3, imageObject) {
                        if (added) return;
                        if (imageObject.height < image_size | imageObject.width < image_size) {
                            var imageObj = (k3 > 0 ? imageArray[k3 - 1] : imageArray[0]);

                            var $img = $('<div class="photoImage" />');
                            $img.css('background-image', 'url(' + imageObj.source + ')');

                            var $link = $('<a class="photoLink" target="_blank" />');
                            $link.prop({
                                href: pictureObject.link
                            }).append($img);
  ...