Facebook Album jQuery Plugin

by ignaciocorreia

HTML

<div id="unyk-photo"></div>

CSS

#unyk-photo {  padding: 15px;}
#unyk-photo li{opacity:0;float: left;
height: 130px;}
#unyk-photo a:hover {
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
    box-shadow: 0 0 0 0px #FFF, 0 0 18px 3px rgba(0, 0, 0, 0.55);
    z-index: 999;
}

#unyk-photo a { 
    -webkit-transition: all ease-out 0.1s;
       -moz-transition: all ease-out 0.1s;
         -o-transition: all ease-out 0.1s;
            transition: all ease-out 0.1s;
    overflow: hidden;
    display: block;
    float: left;
    background: rgb(240, 240, 240);
    padding: 0;
    margin: 0 0 0 0;
    width: 126px;
    height: 98px;
    position: relative;
}
#unyk-photo a span {  display: block;  overflow: hidden;  width: 118px;  height: 90px;   border: 4px solid #FFF;}

#unyk-photo img {
    -webkit-transition: all ease-out 0.3s;
    -moz-transition: all ease-out 0.3s;
    -o-transition: all ease-out 0.3s;
    transition: all ease-out 0.3s;
    display: block;
    min-width: 120px;
    position: relative;
    margin: 0 auto;
    top: 50%;

}
/*
    #unyk-photo a:hover img{
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
    }
*/
.unkmask {/*
        -webkit-transition: all ease-out 0.3s 0.5s;
    -moz-transition: all ease-out 0.3s 0.5;
    -o-transition: all ease-out 0.3s 0.5s;
    transition: all ease-out 0.3s 0.5s;
    opacity:0;
    height: 70px;
    position: absolute;
    width: 118px;
    bottom: 4px;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.9)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%);
    background:...

JavaScript

$(document).ready(function(){
    $("#unyk-photo").fbAlbum({'albumID' : '113228382053375'}); 
});

(function($){
  'use strict';
  $.fn.fbAlbum = function(options) {
    var $this = this;
    var settings = {
			'albumID' : '113228382053375',
            'limit' : 100, // limit on number of linked photos in album
            'limitThumbs' : false, // set to number to limit number of thumbnails displayed
            'ulClass' : 'album',
            'rel' : 'group',
            'callback' : '',
            'title' : true,
            'thumbSize' : 3, // use sizes 1 - 9 to change from default size
            'fullSize' : 0, // use sizes 1 - 9 to change from default size
            'charLimit' : 35 // Limit Description Characters - 0 to show all
    };
    
    if(options){$.extend( settings, options );}
  
    var graph = "https://graph.facebook.com/"
        + settings.albumID
        + "/photos?limit=" + settings.limit
        + "&callback=?";  
    
    $.getJSON(graph, function(data) {
        var albumItem = [],
            val2;
        for(var key in data){
            for(var key2 in data[key]){
                val2=data[key][key2];
                if(typeof(val2.source)!="undefined"){
                    var imgHTML ='',
                        liClass = 'class="fbThumb"',
                        liHTML,
                        thumbImg = settings.thumbSize === 0 ? val2.picture : val2.images[ 9 - settings.thumbSize ]['source'],
                        fullImg = settings.fullSize === 0 ? val2.source : val2.images[ 9 - settings.fullSize ]['source'],
					    title,
                        title2 = '',
                        href = 'href="' + fullImg + '" ',
                        rel = 'rel="' + settings.rel + '" '
                    ;
					if ( settings.title && val2.name ) {
                        title = val2.name.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');
                      ...