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&kind=photo&hl=pl&imgmax='+Gal.imgMax+'&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

Tags: galeria, google, jquery, JSON, picasa, picbox

W serwisie Twitter.com pojawia się bardzo dużo wpisów na wiele różnych tematów. Pokażę dzisiaj jak przy pomocy API Twittera, PHP, JSON’a i PrototypeJS zrobić prosty gadżet, który będzie co jakiś czas odpytywać się o nowe wpisy na dany temat i automatycznie je wyświetlać.

ZOBACZ DEMO »

(więcej…)

Tag img jest jednym z najpotrzebniejszych znaczników na stronach. Jednak gdy przychodzi do dynamicznego ładowania czy zmiany atrybutów często pojawiają się niespodziewane problemy, które chciałbym przedstawić razem z rozwiązaniami.

Przykładowy obrazek:

<img id="pic" src="http://cdn.contails.websgo.net/imgs/logo_beta6_3_pl.png" />

var pic = document.getElementById('pic'); 

Pobranie wysokości i szerokości obrazka osadzonego w DOM.

var w = pic.width;
var h = pic.height; 

Ciekawsza rzecz zaczyna się wtedy, gdy chcemy załadować zdjęcie dynamicznie i pobrać jego rozmiar.

(więcej…)

Pierwsza połowa tego roku przyniosła najnowsze wersje różnych przeglądarek. W końcu zaczyna być widać, że konkurencja między Firefox 3.5, IE8 i chociażby Chrome 3 przynosi efekty w postaci długo oczekiwanych zmian dla użytkowników i twórców stron.

Poza tym, że wyniki testu Acid3 są coraz lepsze, to pojawiło się parę nowych funkcjonalności, które zostały zaimplementowane przynajmniej w kilku z nich. Omówię funkcjonalności, które wpływają na prędkość ładowania stron oraz pozwalają na lepsze wykorzystanie JavaScriptu.

Proces w zakładce

Przeglądarki zaczęły rozdzielać poszczególne zakładki na osobne procesy. Skutkuje to szybszym przeglądaniem, ponieważ strony są przetwarzane równolegle w tym samym czasie. Dodatkowo, błąd na jednej zakładce nie powoduje zamknięcia całej przeglądarki, ale tylko jednego procesu.
Programiści IE 8 też dali radę to osiągnąć i tworzą dobrze widoczny proces iexplorer.exe dla każdej zakładki.

(więcej…)