<!--:fr-->[tuto mashup] Galerie photo animée via Flickr : animer votre galerie (2/2)<!--:-->

[tuto mashup] Galerie photo animée via Flickr : animer votre galerie (2/2)

janvier 22nd, 2008 JS Antoine

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. ?>

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>

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</div>
  6.  
  7. </body>
  8. </html>

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. }

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!

Antoine

Passionné du web et de tout ce qui s'en rapproche, je tiens se blog sans prétentions pour vous faire partager mes découverte et mes interrogations sur le développement, le management, l'agilité, la gestion de projet.

Did you enjoy this post?

If so, would you please consider sharing it with the world

User Responses

17 Responses and Counting...

  1. Benjamin

    janvier 22, 2008

    Pourquoi ne pas proposer un lien vers une démo de ton mashup flickr ?

  2. Guiral antoine

    janvier 22, 2008

    Arf désolé! J’avais zappé de le mettre! C’est corrigé! MERCI!

  3. scalpa

    janvier 22, 2008

    Le lien vers interface est mort, dommage je ne peux pas essayer ce tuto !

  4. Guiral antoine

    janvier 22, 2008

    Je mets un lien vers le fichier dès que je rentre des cours!

  5. Clément

    janvier 22, 2008

    Sympa le nouveau blog ;) Tout d’abord merci pour ce tuto
    Je l’ai suivi et j’ai réussi à afficher les photos avec l’API
    mais à la 2e étape ça me sort « getPhotos() as $photo ) { echo $photo['imgThumb'] , ‘ ‘; } ?> »

    je pense que le problème vient de l’index :
    getTitle() , ‘ : ‘ , $album->getDescription() ,  »;

    // Affiche le propriétaire

    echo ‘Un album de ‘ , $album->getOwnerName() ,  »;

    // Affiche les « thumbs » de toutes les photos de l’album :

    ?>

    Test JQuery/Flickr

    Test flickr

    getPhotos() as $photo ) {

    echo $photo['imgThumb'] , ‘  ’;

    }

    ?>

  6. Clément

    janvier 22, 2008

    Bon ça bug! le code s’affiche pas dans le commentaire…
    Question Les différents bouts de codes sont réunis comment? (dans une ou plusieurs pages?)

  7. admin

    janvier 22, 2008

    Salut et merci ;-)

    Utilise les balises pour mettre ton code sinon je ne vois pas tout…

  8. Clément

    janvier 22, 2008

    < ?php

    require('flickr.php');

    // Paramètres API :

    $apiKey = '******************************************';
    $apiSecret = '*****************************';

    // Id du User :

    $userId = '**********@N06';

    //Id de l'album :

    $albumId = '*************************';

    // Nouvelle instance de Flickr :

    $flickr = new Flickr( $apiKey , $apiSecret );

    // Nouvelle instance de Album :

    $album = new Album( $flickr , $albumId , $userId );

    // Affiche titre et description de l'album

    echo $album->getTitle() , ' : ' , $album->getDescription() , '
    ';

    // Affiche le propriétaire

    echo 'Un album de ' , $album->getOwnerName() , '
    ';

    // Affiche les "thumbs" de toutes les photos de l'album :

    ?>
    < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>






    Test flickr

    < ?php

    foreach( $album->getPhotos() as $photo ) {

    echo $photo['imgThumb'] , '  ';

    }

    ?>


  9. admin

    janvier 22, 2008

    bon déjà a première vu ca ne va pas. Le bout de code que tu as placé dans le html est bien mais tu l’as en double! Il faut que tu le vire du dessus : en gros tu ne doit pas faire d’affiche (echo) hors de tes balises html.

  10. Clément

    janvier 22, 2008

    j’ai essayé plusieurs truc … mais ça marche pas
    l’index est en .html ou php

  11. admin

    janvier 22, 2008

    si tu as du php dans ta page ton extension est forcement en .php, ensuite il faut que tu travaille sur un serveur (local ou distant). Le php est interprété coté serveur tandis que le html est interprété coté client, comme le javascript. Ca te met quoi comme erreur? tu utilise quoi pour développer? Tu as peut etre fais une erreur de syntaxe…

  12. Clément

    janvier 22, 2008

    Au lieu de m’afficher la galerie ça me met :
    // Affiche les "thumbs" de toutes les photos de l'album : foreach( $album->getPhotos() as $photo ) { echo $photo['imgThumb'] , ' '; } ?>

    C’est sur un serveur de chez free et je j’ai installé PSpad aujourd’hui comme éditeur.

  13. admin

    janvier 22, 2008

    je t’ai dit tout a l’heure de virer tout tes affichages avant les balises html.tu l’as fait? c’est à dire qu’il faut que tu vire tout ce qu’il y a entre l’instance de ton album et la balise de fermeture de ton php…

  14. Clément

    janvier 22, 2008

    et j’en fais quoi?
    il y a vraiment un souci au niveau de l’ordre des bouts de code..
    merci pour ton aide ;)

  15. Antoine

    janvier 22, 2008

    de rien mon gars ;-)

    donc en fait si je récapitule :

    au début tu instancie ton album, ensuite tu démarre ton html puis au moment ou tu veux afficher tes photos tu place le bout de code qui les affiche, et ensuite tu termine ton html. Si tu as d’autres questions n’hesites pas!

  16. Clément

    janvier 22, 2008

    merci Antoine
    et profite de Barcelone il parait que c’est une chouette ville ;)

  17. Antoine

    janvier 22, 2008

    Oui c’est une p*tain de ville!!!

    Tu as résolu ton problème? tu peux nous montrer ce que tu cherchais à faire? N’hésites pas à repasser me voir ;-D

Leave a Reply

Default User

Your Name

janvier 22, 2008

* Name, Email, and Comment are Required

Get Adobe Flash playerPlugin by wpburn.com wordpress themes