Available Options
- albumURL (required): full URL to a Facebook Album
- limit: limit to the last X photos (default: 10)
- CSS: CSS styles to apply to every image
- imgSize: size of the image (default: medium)
- original
- huge
- x-large
- large
- medium
- small
- x-small
For more information on image sizes, check out the Facebook Graph Photos API.
How to Use?
$("#slideshow a").facebookAlbumPhotos({
'albumURL': 'https://www.facebook.com/media/set/?set=a.451566814872131.116852.266818906680257',
'limit': '6',
'CSS': 'opacity:0;',
'imgSize': 'huge'
});Access Facebook Album with jQuery – Source Code
<html>
<head></head>
<body>
<div id="slideshow"><a href="#"></a></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="fb-photos.js"></script>
<script>
$(document).ready(function(){
$("#slideshow a").facebookAlbumPhotos({
'albumURL': 'https://www.facebook.com/media/set/?set=a.451566814872131.116852.266818906680257',
'limit': '6',
'CSS': 'opacity:0;',
'imgSize': 'huge'
});
});
</script>
</body>
</html>(function($){
$.fn.facebookAlbumPhotos = function(options) {
var settings = $.extend(options);
return this.each(function() {
var albumID = settings.albumURL.replace(/.*(a\.)([0-9]+).*/,"$2");
var photoLimit = settings.limit||10;
var target = $(this);
var imgStyle = settings.CSS||'';
var imgSizes = {'original':1,'huge':2,'x-large':3,'large':4,'medium':5,'small':6,'x-small':7};
var imgSize = imgSizes[settings.imgSize]||5;
$.getJSON('https://graph.facebook.com/'+albumID+'/photos?callback=?',function(json,status,xhr){
if(json.data.length<photoLimit) {
photoLimit = json.data.length;
}
target.html(''); // empty the target element
if (!target.is("a")) { // create an anchor tag linking to the album that holds all the images
target.append("<a href='"+settings.albumURL+"'></a>");
target = target.children(":first");
}
for(i=json.data.length-1;i>=json.data.length-photoLimit;i--) { // load all the images
target.append("<img src='"+json.data[i].images[imgSize].source+"' alt='Slideshow image' style='"+imgStyle+"'/>");
}
});
});
};
})( jQuery );