Ça y est! Il est là, il est tout nouveau tout beau! Le tutoriel pour faire une galerie photo animée avec JQuery et qui utilise flickr pour héberger vos photos. Un bon petit mashup quoi! Pour voir ce que ça donne un peit test ici… Allé gogogogogo!
Bon, on veux héberger nos photos chez flickr. Donc…il vous faut un compte flickr (si ce n’est déjà fait!). Allé hop hop hop on s’inscrit. Si vous avez un compte yahoo! cela devrait être ok. L’ inscription ça c’est fait. Un petit mail de validation plus tard vous voila connecter sur votre compte flickr.
Pour la suite sur flickr je vous ai préparé un tutoriel vidéo. Je vous conseille de le suivre en entier, surtout pour la fin!
Alors là on rentre dans le vif du sujet. Nous allons utiliser une classe php. Des notions de POO serait un plus mais si vous n’y connaissez rien en POO pas de problème vous pouvez continuer. Pour commencer vous devez >>télécharger la classe basée sur l’API de flickr<<. C’est elle qui va nous permettre d’afficher nos photos. Créez vous un dossier dans lequel vous décompressez l’archive. Créez y aussi un nouveau fichier php, par exemple : test-flickr.php.
Activer la librairie curl : Il faut à présent vérifier que votre serveur local soit configuré correctement. Ouvrez votre php.ini et trouvez le bloc qui contient toutes les extensions de php. Il faut ensuite décommenter (enlever le “;” au début de la ligne) la ligne suivante : extension=php_curl.dll. C’est presque fini. Allez dans votre dossier “php” dans easyPhp ou dans WAMP et copier les fichiers libeay32.dll et ssleay32.dll dans votre dossier windows/system32 ou windows/system suivant votre version de windows.
Place au code :
La première ligne va concerner l’inclusion de notre classe :
<?php
require(’flickr.php’);
Ensuite pour pouvoir utiliser l’API nous devons obtenir une deux clés (gratuites). C’est le cas pour la quasi-totalité des API. La première clé s’obtient en remplissant ce formulaire :
La seconde clé suivez le lien indiquez par la flèche rouge. Elle se situe sous la première clé et s’appelle clé de “secret partagé“. Nous pouvons maintenant nous connecter à flickr via l’API.
// Paramètres API :
$apiKey = ‘010e84b635468**********8d7a0f322′;
$apiSecret = ‘989******aa1418e’;
La variable $apiKey correspond à la première clé. Pas la peine de traduire pour la seconde ;-).
Vous vous souvenez des id que vous avez notés au début? Re-sortez les!
// Id du User :
$userId = ‘227*****@N07′;
//Id de l’album :
$albumId = ‘72157*********064′;
Nous y voilà. Nous allons instancier notre classe Flickr. C’est à dire que nous allons créer un objet à partir de notre classe. Voila comment ça se passe :
// Nouvelle instance de Flickr :
$flickr = new Flickr( $apiKey , $apiSecret );
Notre nouvel objet : $flickr. C’est lui qui gère la connexion avec l’API. On va créer une instance de notre album maintenant. Même combat sauf que la classe change de nom :
// Nouvelle instance de Album :
$album = new Album( $flickr , $albumId , $userId );
Enfin! Nous avons notre album. On comprend rapidement les arguments que l’on transmet lors de l’instance : notre objet $flickr pour se conecter, notre identifiant d’album $albumId et notre identifiant utilisateur $userId. On a donc ce qu’il nous faut pour accéder à nos photos : Notre objet $album.
Pour ce tutoriel j’utilise la méthode getPhotos(). C’est celle qui nous donne le plus de données utilisables. Pour le moment nous allons nous contenter d’afficher les miniatures de nos photos.
// Affiche les “thumbs” de toutes les photos de l’album :
foreach( $album->getPhotos() as $photo ) {
echo $photo['imgThumbs'] ;
}
?>
Le foreach permet d’assigner à la variable $photo chaque “ligne” ou “tuple” (pour reprendre un langage plus orienté base de données) renvoyés par la methode getPhotos(). Si vous voulez avoir le détail de ce que renvoi getPhotos() pour faire mumuz et modifier le script à votre guise, remplacez la ligne du echo par :
var_dump($photo);
Un petit test dans firefox votre navigateur favori et normalement vous devriez avoir toutes vos miniatures!
Un grand merci à scriptsphp pour cette classe et la doc fournie. D’ailleurs n’hésitez pas à aller faire un tour sur leur site pour voir toutes les méthodes qui existent.
La prochaine étape du tutoriel portera sur l’aspect animation de la gallerie histoire d’avoir un truc présentable!
Si vous avez fait des essais postez vos url’s en commentaire. Pareil si vous avez des bugs, problèmes remarques, etc etc n’hésitez surtout pas!! A très bientôt pour la suite!
EDIT : la suite est ici!
Je vous préviens : c’est totalement subjectif!
