Facebook Album jQuery Plugin

by ignaciocorreia

HTML

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

CSS

#unyk-photo {  padding: 15px;}
#unyk-photo li{opacity:0;}
#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;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    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.zoom{
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
    }
#unyk-photo a:hover img.rotate{
    -webkit-transform: rotate(10deg);
       -moz-transform: rotate(10deg);
         -o-transform: rotate(10deg);
            transform: rotate(10deg);
    }

#unyk-photo a:hover img.zoom.rotate{
    -webkit-transform: scale(1.2) rotate(10deg);
       -moz-transform: scale(1.2) rotate(10deg);
         -o-transform: scale(1.2) rotate(10deg);
            transform: scale(1.2) rotate(10deg);
    }
/*#unyk-photo a::before {content: " ";height: 99px;position: absolute;background: #efefef;width: 121px;border: solid 1px #ccc;z-index: -1;margin-left: 2px;}
#unyk-photo a::after {content: "...

JavaScript

$(document).ready(function(){
    $("#unyk-photo").fbAlbum({'albumID' : '175515999152805'}); 
});
(function($){
    /*
    ** Based on Facebook Album plugin: //http://zach.lysobey.com/projects/fbalbum
    ** Froked and improved
    ** 14-02-2012
    ** Copyright Unykvis - www.unykvis.com
    ************************************************** TUTORIAL ******************************************
    ** 1 - Open an Album -> https://www.facebook.com/media/set/?set=a.316645931785379.73982.177912128992094
    ** 2 - Copy the album id _________________________________________↑_[Copy this]_↑
    ** 3 - Paste and change the album id, example: $("#unyk-photo").fbAlbum({'albumID' : '316645931785379'}); 
    *******************************************************************************************************
    */
  'use strict';
  $.fn.fbAlbum = function(options) {
    var $this = this;
    var settings = {
			'albumID' : '316645931785379',
            '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' : 55, // Limit Description Characters - 0 to show all
            'zoomImages' : true,
            'rotateImages' : true
    };
    
    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"){
              ...