keemor.com - Surfin' JavaScript Wave

jQuery fullscreen gallery using Google Plus Photos JSON feed

Two years ago I wrote a post on how to embed jQuery Picbox gallery using Picasa JSON feed.

Over the time some things changed and I will show how to make full screen gallery using jQuery Supersized Plugin and Google Plus Photos JSON feed.

CHECKOUT DEMO »»

First you have to download JSON stream of photos


<script src="https://picasaweb.google.com/data/feed/base/user/100335274795261722710/albumid/5622827203091651201?alt=json&amp;kind=photo&amp;hl=pl&amp;imgmax=912&amp;callback=displayGallery"></script>

This JSON stream isn’t visible anywhere on Google Plus Photos but it works (for now).

You must insert proper user and albumid due to your Google Plus Photos.

imgmax parameter can have values such as: 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600

Last parameter is callback which invokes function displayGallery.
Function displayGallery must be declared before fetching JSON feed from Google Photos.

In displayGallery we prepare photos array.
In item you can find all possible data of photo with many different sizes.


function displayGallery(data){
	var l = data.feed.entry.length;	 
	var photos = [];
	for (var i = 0; i < l;  i++) {	 
		var item = data.feed.entry[i];							
		photos.push({image: item.media$group.media$content[0].url, title:'We teach where the wind blows!', url : '/'});
	} 
	jQuery(function($){
		$.supersized({		
			slideshow               :   1,		//Slideshow on/off
			autoplay				:	1,		//Slideshow starts playing automatically
			start_slide             :   1,		//Start slide (0 is random)
			random					: 	1,		//Randomize slide order (Ignores start slide)
			slide_interval          :   6000,	//Length between transitions
			transition              :   3, 		//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
			transition_speed		:	700,	//Speed of transition
			new_window				:	1,		//Image links open in new window/tab
			pause_hover             :   0,		//Pause slideshow on hover
			keyboard_nav            :   1,		//Keyboard navigation on/off
			performance				:	1,		//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
			image_protect			:	1,		//Disables image dragging and right click with Javascript
			image_path				:	'', //Default image path
			//Size &amp;amp;amp;amp; Position
			min_width		        :   0,		//Min width allowed (in pixels)
			min_height		        :   0,		//Min height allowed (in pixels)
			vertical_center         :   0,		//Vertically center background
			horizontal_center       :   1,		//Horizontally center background
			fit_portrait         	:   1,		//Portrait images will not exceed browser height
			fit_landscape			:   1,		//Landscape images will not exceed browser width
			navigation              :   1,		//Slideshow controls on/off
			thumbnail_navigation    :   1,		//Thumbnail navigation
			slide_counter           :   1,		//Display slide numbers
			slide_captions          :   1,		//Slide caption (Pull from "title" in slides array)
			slides					:	photos																
		}); 
	});
}

Remember to include on your page:


<link rel="stylesheet" href="/static/css/supersized.css" type="text/css" media="screen" />		
<script type="text/javascript" src="/static/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/static/js/supersized.3.1.3.min.js"></script>

That’s it. Enjoy!