La suite du tutoriel sur les mashup avec flickr est là! Sachez que ce tutoriel est applicable avec toutes vos photos, qu’elles proviennent de flickr ou non.

Pour ceux qui ne veulent pas ou n’ont pas le temps ou l’envie de lire la première partie voici ma page de test pour la galerie avec flickr (des fois il y a un bug, faites f5 le temps que je corrige ce problème…).

  • Le javascript : jquery

Nous allons d’abord télécharger notre framework préféré >>JQuery<< et le plugin >>Interface<< qui nous intéresse.

Choisissez bien!

Je vous conseil de mettre vos deux librairie dans un dossier que vous nommerez scripts et qui contiendra tous vos scripts javascript et vos librairies. Maintenant que votre espace de travaille est préparé reprenons le fil du tutoriel précédent :

  1.  
  2.  <?php
  3. require(’flickr.php’);
  4. // Paramètres API :
  5. $apiKey = ‘010e8*************8c3e*******22′;
  6. $apiSecret = ‘98*********418e’;
  7. // Id du User :
  8. $userId = ‘22********3@N07′;
  9. //Id de l’album :
  10. $albumId = ‘721***************4′;
  11. // Nouvelle instance de Flickr :
  12. $flickr = new Flickr( $apiKey , $apiSecret );
  13. // Nouvelle instance de Album :
  14. $album = new Album( $flickr , $albumId , $userId );
  15.  
  16. ?>
  17.  
  18. <?php
  19. // Affiche les “thumbs” de toutes les photos de l’album :
  20. foreach( $album->getPhotos() as $photo ) {
  21. echo ‘<a href=”#”>’.$photo['imgThumbs'].’</a>’ ;
  22. }
  23. ?>
  24.  

Pour rappel, ce petit bout de code permet de récupérer des photos que l’on héberge chez flickr. Nous allons le compléter. Vous remarquez que j’ai séparé le code en deux parties : la première regroupe tous les traitements (les instances, les assignations, les appels de fonctions,etc…) tandis que la seconde concerne l’affichage des photos. Vous remarquez aussi que j’ai rajouté un lien sur nos photos. Nous ne nous en servirons pas mais vous pourriez par exemple afficher la même image en taille réelle!…

Nous allons commencer par placer notre entête XHTML. Elle contient une DTD qui spécifie au navigateur dans quelle langue vous “parlez” (HTML ou XHTML et quelle version). Viennent ensuite les balises “head” qui contiennent beaucoup d’informations dont les différent liens vers vos fichiers de styles ou de scripts.

  1.  
  2.  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  3. <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”fr” lang=”fr”>
  5. <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
  6. <meta http-equiv=”Content-Style-Type” content=”text/css” />
  7. <link rel=”stylesheet” type=”text/css” media=”screen” href=”styles/styles.css” />
  8. <script type=”text/javascript” src=”scripts/jquery.js”></script>
  9. <script type=”text/javascript” src=”scripts/interface.js”></script>
  10. </head>
  11.  

Vient ensuite le corps de la page, le “body“. Le notre sera très sommaire : un titre et un div qui contiendra notre galerie. Pour y avoir accès facilement dans notre CSS nous lui assignerons un identifiant unique (”id“).

  1.  
  3. <h2>Test flickr</h2>
  4. <div id=”carousel”>
  5. //mes photos
  6. </div>
  7.  
  8. </body>
  9. </html>
  10.  

Là si j’ai bien expliqué vous devriez déjà avoir copier le second bout de php à la place du commentaire “//mes photos“. Sinon ben faites le vite :-).

  • Le CSS

On est bientot arrivé! Il faut maintenant donner un peu de style à tout ça. Qu’est ce qu l’on a : un div avec un identifiant “carousel” et des images dans ce div. Et bien allons-y! Petit rappel : nous travaillons dans le fichier styles.css qui se trouve dans le dossier styles à la racine de notre site web. Le border:none; sur les images permet de ne pas avoir une belle bordure bleu autour de vos magnifiques photos de vacances. Le position:absolute; sur les liens est nécessaire au bon fonctionnement du plugin!

  1.  
  2. #carousel a
  3. {
  4. position: absolute;
  5. width: 110px;
  6. }
  7.  
  8. #carousel img
  9. {
  10. border: none;
  11. }
  12.  

Voila le tuto est fini! J’espère qu’il vous a apporté des choses! Envoyez moi vos réalisations! Cela me ferait vraiment plaisir! De plus nous pourrions échanger sur nos façons de faire, ou si vous trouvez des p’tites astuces…enfin bref : laissez moi un commentaire qu’on discute un peu :p

See you!

Partagez cet article :
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • co.mments
  • De.lirio.us
  • Live
  • Ma.gnolia
  • Pownce
  • Scoopeo
  • Technorati
  • TwitThis
  • Wikio FR
  • e-mail
  • Wikio

Autres articles intéressants :

Articles les plus actifs :