Tag : Web 2.0

Mes favoris de la section JavaScript :

• Eléments HTML déplaçables
• Ressources DHTML en tout genre
• 5 scripts utiles
• Prototype : une classe pour faire de jolis effets graphiques simplement
• Scriptaculous : une classe pour faire des effets graphiques et des éléments déplaçables
• SlideShow tout en douceur (dont j'ai déjà parlé)
• Comment créer un éditeur WYSIWYG
• Awards du Web 2.0

Et puis 4 sites de références de Javascript. Chacun ont leurs avantages et inconvénients. J'utilise ne priorité celle du W3C car elle est la plus simple à utilisé, mais après les autres se valent à peu de choses près.

• Référence du W3C
• Référence de Sun
• Référence de Mozilla (peut-être des éléments compatibles uniquement Gecko)
• Référence de JavaScript Kit

Juste pour le fun, je vous fais passer ce clip du SAV des émissions d'Omar et Fred.

Tellement énervé de mettre cet iframe sur mon blog que j'ai regardé du côté de l'API PHP que FlickR.

Et tellement les exemples sont simples et clair que je n'ai pu m'en empécher...

Donc, pour commencer, je code PHP :

$set = $_GET['set'];

$params = array(
	'api_key'		=> 'YOUR_FLICKR_API_KEY',
	'method'		=> 'flickr.photosets.getPhotos',
	'photoset_id'		=> $set,
	'format'		=> 'php_serial',
);

$encoded_params = array();

foreach ($params as $k => $v){
	$encoded_params[] = urlencode($k).'='.urlencode($v);
}

function urlImg($farm, $server, $id, $secret) {
 return 'http://farm'.$farm.'.static.flickr.com/'.$server.'/'.$id.'_'.$secret.'.jpg';
}

$url = "http://api.flickr.com/services/rest/?".implode('&', $encoded_params);
$rsp = file_get_contents($url);
$rsp_obj = unserialize($rsp);

if ($rsp_obj['stat'] == 'ok') {
	$ret = "countArticle = 0;
	var mySlideData = new Array();";
	foreach($rsp_obj['photoset']['photo'] as $photo) {
		$url = urlImg($photo['farm'], $photo['server'], $photo['id'], $photo['secret']);
		$ret.= "mySlideData[countArticle++] = new Array('$url', '#', '".$photo['title']."', '');\n";
	}
	$ret.= "function startSlideshow() {
		var slideshow = new timedSlideShow($('mySlideshow'), mySlideData);
	}
	addLoadEvent(startSlideshow);";
	echo $ret;
} else {
	echo "Call failed!";
}
?>

(Oups, pas de commentaires...)

Et ensuite, il suffit de l'appeler comme un fichier source JavaScript, en donnant en paramètre le set_id que l'onveut afficher et l'id de la div dans laquelle on veut afficher le SlideShow. Enfin, il faut que tous les éléments nécessaires au Smooth SlideShow soient présents, et c'est tout bon...

Le résultat :