jQuery Plugin To Display Photos From Your Facebook Album – Facebook Photos

jQuery Plugin To Display Photos From Your Facebook Album – Facebook Photos

Welcome Folks In this post we will be fetching photos from Facebook Album using a jQuery Plugin.The whole source code of the application is given below.

Facebook Album Photos (jQuery)

This just dumps a set of photos from a Facebook album into an html object.

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
READ  Generate Custom Social Share Buttons With jQuery C Share Plugin

For more information on image sizes, check out the Facebook Graph Photos API.

 

Usage

 

$("#slideshow a").facebookAlbumPhotos({
	'albumURL': 'https://www.facebook.com/media/set/?set=a.451566814872131.116852.266818906680257',
	'limit': '6',
	'CSS': 'opacity:0;',
	'imgSize': 'huge'
});

 

Full Example 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 );

 

Leave a Reply

Close Menu