jQuery fullscreen gallery using Google Plus Photos JSON feed

Posted on by

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&kind=photo&hl=pl&imgmax=912&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; 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!

Share

Galeria jQuery Picbox i JSON z Picasy

Posted on by

INFORMACJE ZAWARTE TUTAJ SĄ NIEAKTUALNE

Zobacz nową wersję na jQuery fullscreen gallery using Google Plus Photos JSON feed

Prowadzę małą stronę mojemu przyjacielowi i co jakiś czas uaktualniam galerie zdjęć. Muszę wtedy wrzucić zdjęcia na serwer i poprawić JS. To strasznie nudne, niewygodne i nie mam na to czasu.

Kolega używa Google Picasa Web Albums z którego pobierzemy źródło zdjęć w formacie JSON i wyświetlimy przy pomocy galerii jQuery Picbox.

Zobacz DEMO »»

Przykładowa galeria w Picasie:
http://picasaweb.google.com/114870412886981821775/FIFAWORLDCUPGIRL2010

Po prawej jest link RSS, która wygląda tak:
http://picasaweb.google.com/data/feed/base/user/114870412886981821775/albumid/5486865816083035937?alt=rss&kind=photo&hl=pl

Zgodnie ze specyfikacją parametrów Picasa Web Albums zmieniamy parametr alt na json oraz dodajemy imgmax i callback w którym przekażemy nazwe funkcji do wywołania po załadowaniu źródła danych w formacie JSON.

W sekcji head zawieramy jQuery i Picbox:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.picbox.min.js"></script>
<link href="picbox.css" media="screen" rel="Stylesheet" type="text/css" />

W body wystarczy nam odnośnik, który włączy galerie:


<a href="#" id="gallery"><h1>FIFA WORLD CUP GIRLS 2010</h1></a>
<img id="gallery-loader" src="ajax-loader.gif"  style="display: none;"/>

i JavaScript:


var Gal = {				
	//Maks. szerokosc zdjecia z Picasy
	// 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600 
	imgMax:800,
	//Tablica ze zdjeciami 
	photos: [],	
	//Obrazek ladowacza
	loaderImg: $('#gallery-loader'),
	init: function() {
		if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
			$('#gallery').bind('click',function(e){
				e.preventDefault();
				//Pokaz ladowacza
				Gal.loaderImg.show();
				//Dodanie źródła JSON z Picasy z parametrem callback = Gal.prepare do BODY    																						
				$('BODY').append('<script src="http://picasaweb.google.com/data/feed/base/user/114870412886981821775/albumid/5486865816083035937?alt=json&amp;kind=photo&amp;hl=pl&amp;imgmax='+Gal.imgMax+'&amp;callback=Gal.prepare">'+'</sc'+'ript>');								
			});
		}					
	},
	prepare: function(data){
		var i = data.feed.entry.length;
		//Start od losowego zdjecia
		var start = Math.floor(Math.random()*i+1)
		//Definicja zmiennych
		var item,title,imageurl;	 							
		//Iteracja po zdjeciach
		while (i--) {				
		    item = data.feed.entry[i];
			title = item.title.$t;
			imageurl = item.media$group.media$content[0].url;
			
			//Inne mozliwe dane
			//var width = item.media$group.media$content[0].width;
			//var height = item.media$group.media$content[0].height;								
			//var description = item.media$group.media$description.$t;
			//var link = item.link[2].href;
					
			//Dodanie zdjecia do tablicy zdjec										
			Gal.photos.push([imageurl,title]);				
		} 						
		//Pokazanie galerii
		Gal.show(start);
	},
	show: function(start){
		//Start Picbox
		$.picbox(Gal.photos,start,{'loop':true});
		//Ukrycie ladowacza						
		Gal.loaderImg.hide();
	}						
}
$(document).ready(function(){ Gal.init(); });

I to wszystko!

To rozwiązanie ma dwie główne zalety: zdjęcia mogą być zarządzane przez dowolną osobą w Picasie oraz są serwowane z CDN Google’a

Share

jQuery Picbox gallery using Picasa JSON feed

Posted on by

THIS POST IS OUT OF DATE

Checkout new version at jQuery fullscreen gallery using Google Plus Photos JSON feed

I’m running small website for my friend and there always be an issue with updating the gallery, because I had to manually upload photos and then change JavaScript code as well.

Fortunately he’s using Google Picasa Web Albums which we’ll use as a JSON feed and show on our site using JavaScript only – specially jQuery Picbox gallery.

CHECKOUT DEMO »»

Let’s consider example gallery at Picasa:
http://picasaweb.google.com/114870412886981821775/FIFAWORLDCUPGIRL2010

At the right there is RSS link which looks like this:
http://picasaweb.google.com/data/feed/base/user/114870412886981821775/albumid/5486865816083035937?alt=rss&kind=photo&hl=pl

Due to Picasa Web Albums query parameters reference we change alt param to json and add imgmax and callback in which we pass the name of the function to invoke after the feed is loaded.

In the head section jQuery and Picbox must be included:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.picbox.min.js"></script>
<link href="picbox.css" media="screen" rel="Stylesheet" type="text/css" />

And all is needed in body section:


<a href="#" id="gallery"><h1>FIFA WORLD CUP GIRLS 2010</h1></a>
<img id="gallery-loader" src="ajax-loader.gif"  style="display: none;"/>

and then JS:


var Gal = {				
	//Max image width form Picasa
	// 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600 
	imgMax:800,
	//Array of photos
	photos: [],	
	//Loader image	
	loaderImg: $('#gallery-loader'),
	init: function() {
		if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
			$('#gallery').bind('click',function(e){
				//Prevent default click event
				e.preventDefault();
				//Show loader
				Gal.loaderImg.show();
				//Add JSON feed from Picasa with parameter callback = Gal.prepare to BODY   																						
				$('BODY').append('<script src="http://picasaweb.google.com/data/feed/base/user/114870412886981821775/albumid/5486865816083035937?alt=json&amp;kind=photo&amp;hl=pl&amp;imgmax='+Gal.imgMax+'&amp;callback=Gal.prepare">'+'</sc'+'ript>');								
			});
		}					
	},
	//data array with photos from Picasa
	prepare: function(data){
		var i = data.feed.entry.length;
		//Start with random photo
		var start = Math.floor(Math.random()*i+1)
		//Define vars at once			
		var item,title,imageurl;	 							
		//Iterate thru data 
		while (i--) {				
		    item = data.feed.entry[i];
			title = item.title.$t;
			imageurl = item.media$group.media$content[0].url;
			
			//Other possible data  				
			//var width = item.media$group.media$content[0].width;
			//var height = item.media$group.media$content[0].height;								
			//var description = item.media$group.media$description.$t;
			//var link = item.link[2].href;
					
			//Add photo to photos array										
			Gal.photos.push([imageurl,title]);				
		} 						
		//Show gallery
		Gal.show(start);
	},
	show: function(start){
		//Start picbox gallery
		$.picbox(Gal.photos,start,{'loop':true});
		//Hide loader						
		Gal.loaderImg.hide();
	}						
}
$(document).ready(function(){ Gal.init(); });

And that’s it!

I think this solution has two major advantages: photos can be changed directly in Picasa by 3rd party admin and they are served via Google CDN.

Share

QR Code from hCard using Sumo! parser and Google Chart API

Posted on by

jane-qrcode

QR Code stands for Quick Response and was created by Japanese corporation in 1994. It became more popular among end users since mobiles have cameras which are able to read those codes. In my Nokia E51 I use I-nigma Reader, but there’re lots of others.

In this post I’d like to present a piece of JavaScript which generates QRCode from hCard using Google Charts API which after scanning by mobile enables easy adding contact to your contacts’ list.

Look at the DEMO to see what’s all about.
Continue reading →

Share