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;
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);
}
/*#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: " ";height: 3px;position: absolute;background: #efefef;width: 116px;border: solid 1px #ccc;z-index: -2;margin-left: 4px;}*/

JavaScript

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

(function($){
  'use strict';
  $.fn.fbAlbum = function(options) {
    var $this = this;
    var settings = {
			'albumID' : '113228382053375',
            'limit' : 10, // 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' : 30 // 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,
                        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;');
                        //Char Count
                       ...