Introduction
Niveau: Débutant
Picasa est un service Google d’hébergement et de partage d’images plutôt incontournable de nos jours à l’instar de son concurrent de chez Yahoo, FlickR. C’est aussi un excellent logiciel disponible sous toutes les plateformes. Nous allons utiliser dans ce tutoriel PHP et Javascript pour récupérer et mettre en forme vos images. Nous utiliserons l’outil PHP SimpleXML pour parser et exploiter le flux de vos images et galerie Picasa.
Objectif
Réaliser un widget trés simplement pour votre site ou blog qui affiche le contenu de vos galeries (publiques) de façon compacte.
L’intégrer dans un design fluide, si votre site est fluide en largeur les vignettes d’adapteront à la taille réservée.
Lister toutes les images publiques de toutes vos galeries.
Au boulot! Coté serveur…
Tout d’abord on prépare toutes les variables qui seront nécessaires à notre widget.
// Votre compte Google
$userid = 'nicolasbonnici%40gmail.com';
// Creer l'url du feed
$feedURL = 'http://picasaweb.google.com/data/feed/api/user/'.$userid.'?kind=photo';
// On rentre tout ca dans un objet SimpleXML
$sxml = simplexml_load_file($feedURL);
// On recupére des infos du feed
foreach ($sxml->entry as $entry) {
$titre = $entry->title;
$summary = $entry->summary;
$gphoto = $entry->children('http://schemas.google.com/photos/2007');
$height = $gphoto->height;
$width = $gphoto->width;
$media = $entry->children('http://search.yahoo.com/mrss/');
$src = $entry->link[1];
$thumbnail = $media->group->thumbnail[1];
$tags = $media->group->keywords;
if ($tags == ”)
{
$tags = ‘Pas de tags’;
}
echo ‘<a href=”‘.$src->attributes()->{’href’}.’” title=”‘.$thumbnail->attributes()->{’url’}.’” class=”apercu”><img src=”‘.$thumbnail->attributes()->{’url’}.’” style =”width: 85%; margin: 5px;”></a>’;
echo ‘<input type=”hidden” name=”infos” value=”titre: ‘.$titre.’<br />Taille: ‘.$height.’x’.$width.’<br />Tags: ‘.$tags.’”>’;
}
}
Rien de compliqué gràce à l’API Picassa je récupère les informations dont j’ai besoin à chaque nouvel élément trouvé dans mon objet SXML. Pour en savoir plus sur l’utilisation de SimpleXML je ne peut que vous conseiller l’excellente documentation PHP.
Pour l’instant ce que le script affichera en sortie est un peu flou pour vous mais ça va s’éclaircir ensuite dites vous simplement que tout ceci n’est pas innocent si je rentre tel variable dans le titre et encore d’autres dans un élément input de type hidden ce n’est pas par hasard mais pour les récupérer ensuite avec Javascript.
Et coté client?
Un peu de JavaScript sera nécessaire pour afficher un plus grand aperçu et diverses infos. On aurait pu tout simplement chargé l’URL de l’image dans une Lightbox (fenêtre modale qui affiche du contenu tel que des images, du flash et une iFrame voir: Thickbox), vous pouvez voir ce système en fonctionnement sur mon blog dans le menu du haut cliquez sur une image de ma galerie. L’avantage est que cela permet de commenter l’image et de bénéficier de toutes les interactions qu’offre Google directement sans recharger la page.
Mais pour ce tutoriel on va plutot afficher les images au survol de leur aperçu et mettre quelque infos concernant l’image dans un petit div en dessous qui s’ouvre au besoin. Pour se faire rien de très compliqué car nous allons utiliser le framework Javascript Jquery. Pour se faire il faut tout d’abord le télécharger sur le site officiel et enfin l’inclure dans la balise “head” de votre page comme ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="**CHEMIN VERS LE DOSSIER**/jquery-1.2.6.min.js"></script>
</head>
<body>
<!-- ici le corps de votre page -->
Nous allons tout d’abord créer une fonction qui affichera au survol de la miniature, l’image cible dans une taille adapté à l’écran de votre visiteur ainsi que diverses informations que nous avons déjà rapatrier via PHP, nous pourrons stocker ce code dans un tiers fichier que nous appelerons dans la balise “head” comme pour la librairie Jquery ou directement l’insérer dans la page toujours dans les balises “head” bien sur.
function apercu(target_items, name){
$(target_items).each(function(i){
var infos = $(this).next("input[@name=infos]“).val();
$(”body”).append(”<div class=\”"+name+”\” id=\”"+name+i+”\”><img src=\”"+$(this).attr(’title’)+”\”><p>”+infos+”</p></div>”);
var apercu = $(”#”+name+i);
if($(this).attr(”title”) != “”){
$(this).removeAttr(”title”).mouseover(function(){
apercu.css({opacity:0.9, display:”none”}).fadeIn(400);
}).mousemove(function(kmouse){
apercu.css({left:kmouse.pageX-200, top:kmouse.pageY-80});
}).mouseout(function(){
apercu.fadeOut(600);
});
}
});
}
Dans cette fonction Jquery l’essentiel à retenir sont les deux variables dont la fonction à besoin pour s’initialiser, “target_item” sont les éléments à cibler ce qui déclencheront notre fonction et “name” est la classe CSS que nous appliqueront sur l’aperçu. Ensuite on récupère pour chaque éléments trouvé dans le document les infos qui nous intéresse, comme le chemin de l’aperçu ou encore ses informations de taille, nom et ses tags puis si l’élément à un attribut titre non vide on l’affiche dans un div créer par la fonction “append” directement dans le corps de la page.
Ensuite au chargement de la page on appel Jquery, on instance un nouveau objet Jquery et bien sur on appel notre fonction pour animer tout ce beau monde.
<script type="text/javascript">
$(document).ready(function(){
apercu("a.apercu","apercu_wrap");
});
</script>
Et voila, le fait de pouvoir initialiser notre fonction de cette manière nous permet d’utiliser plusieurs classes différentes pour, par exemple, différent type de liens. En effet, on pourrait cibler des lien avec la classe “.info” et leur attribuer une autres classe CSS pour l’aperçu.
Et enfin un peu de CSS pour donner du style un apercu du widget à l’action:
img {border: none;}
#widget_picasa_1col {
overflow-y: auto;
float: right;
width: 90px;
height: 400px;
margin: 10px;
border: #000000 solid 1px;
}
.apercu_wrap{
position:absolute;
z-index:999;
margin-bottom: 10px;
left:-9999px;
background-color:#000000;
padding:5px;
border:5px solid #fff;
width: auto;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-khtml-border-radius-topleft:10px;
-khtml-border-radius-topright:10px;
-khtml-border-radius-bottomleft:10px;
-khtml-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}
.apercu_wrap p{
margin:0;
padding:0;
color:#fff;
font-size: 9px;
font-weight: bold;
background-color:#000;
padding:2px 7px;
text-align: left;
}
.apercu_wrap img{margin: 10px;}
Pour allez plus loin
Ce widget peut être améliorer par beaucoup de moyen, par exemple la puissance de Jquery permettrai de charger les images au fur et à mesure que le visiteur les parcours en envoyant des requête Ajax à chaque fois que l’ascenseur attend le bas de page, afin d’accélérer le chargement de cette dernière.
En conclusion
Nous avons réaliser trés simplement ce widget avec pas moins de trois langages, vous aurez ainsi appris à manipuler l’API Picassa pour rajouter de nouvelles fonctionnalités il vous suffit d’afficher votre feed RSS Picasa avec l’instruction “print_r(votre feed)” pour voir l’important flot d’information disponible et en intégrer de nouvelles au widget.
Pour plus d’infos, vous pouvez consulter la démo ou télécharger l’archive de démonstration de ce tutoriel qui , je l’espère, vous aura bien aidé.
Votez pour ce billet!
Loading ...
Ce site est mon weblog personnel, il traite de divers thèmes tels que la programmation, la musique, l'art, le logiciel libre ou encore du skateboard.
Pas de commentaire
// 3 nov, 2008 // 
Tutoriels // 
5%
Cliquez ici pour ouvrir et fermer ce menu!
Mon lifestream
A lire également
