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

Comments are closed.