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
See also  JavaScript Program to Remove Specific Item From an Array Using Array.splice() Method Full Project For Beginners

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