AJAX en clair : Photothèque

JPBruneau

Tutoriel Ajax en clair - Comment réaliser une photothèque en AJAX

Cet article, suite des articles AJAX en clair, présente la gestion complète d'une photothèque sans utiliser ni base de données, ni cookies, ni session, mettant en évidence (si besoins étaient) la puissance et la souplesse du moteur AJAX.

Commentez

- Titre : AJAX en clair : Photothèque

- Auteur : JPBruneau

- Parution : 7 juillet 2013

- Mise à jour : 7 juillet 2013

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 JPBruneau. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant-propos

- II. Prérequis

- III. Découverte de l'article

- IV. Organisation et explication du code

- IV-A. Actions communes aux deux PHP

- IV-B. Le ZOOM sur image

- IV-C. Conclusion

- V. Remerciements

I - Avant-propos

S'adressant à tous ceux qui maîtrisent la « programmation permettant de gérer un site Web », cet article a pour but d'aller encore plus loin dans l'utilisation du module AJAX.

Developpez.com possède déjà un grand nombre de tutoriels et d'articles sur AJAX. Le but du présent article reste donc de mettre en évidence la multiple utilisation d'un seul et simple module AJAX.

II - Prérequis

Bon programmeur comme vous l'êtes, vous maîtrisez le HTML, les feuilles de style et les bases du JavaScript.

Vous avez lu un des deux articles AJAX en Clair le Chat ou AJAX en Clair le Tableau ainsi le Moteur AJAX de base est considéré comme acquis !

III - Découverte de l'article

Le code de l'exemple décrit dans cet article étant téléchargeable, nous n'affichons dans cet article que les parties de code justifiant des commentaires. Aussi, nous vous conseillons de télécharger et d'installer l'exemple, puis de le tester.

Ainsi, vous serez en possession du code complet et la lecture de l'article s'en trouvera facilitée.

Téléchargez l'ensemble de la photothèque exemple ZIP de la photothèque .
Attention ce zip comprend toute une photothèque soit 23 Mo (4 minutes de téléchargement)

Apparence de l'exemple photothèque :

Que vous pouvez tester ici : Testez la Photothèque .

Cette fois vous avez tout en main et il nous reste à regarder et expliquer le mécanisme général du code.

IV - Organisation et explication du code

Un PHP unique et son correspondant appelé par AJAX, donc deux PHP, index.php et phototheque_ajax.php (PHP appelé par AJAX),Plusieurs fonctions sont utilisées avec chacune leurs quatre phases faciles à isoler :

- dans index.php,un ou des éléments HTML appelant une fonction JavaScript ;

- la fonction JavaScript va en partie analyser les éléments reçus du HTML puis appeler le moteur AJAX ;

- le moteur AJAX ne fait que passer (ici en POST Asynchrone, voir AJAX en clair (1) ) les éléments à traiter au PHP phototheque_ajax.php ;

- le PHP phototheque_ajax.php contient lui aussi un code spécifique pour chaque action, et la partie commune qui va renvoyer le pavé de vignettes photo correspondant à la page en cours.

La page HTML telle que représentée (voir image plus haut) est décrite dans index.php jusqu'aux images cliquables du menu. Le pavé de vignettes étant généré par phototheque_ajax.php. La fonction AJAX est appelée sans action précisée et donc renvoie la totalité du pavé de vignette en cours. AJAX l'envoyant dans le DIV id='LePave2'.

IV-A - Actions communes aux deux PHP

Les deux PHP vont lister les répertoires, et noter pour chacun des répertoires le nombre de photos contenues. Chaque répertoire est une catégorie.

Un outil vous est donné également (phototheque_genere.php). Il vous servira à chaque fois que vous ajouterez des photos ou répertoires dans « albums », à générer les répertoires et vignettes dans « albumsv », Toutes les vignettes portent le nom de la photo suivi de « v ».

Le code commun des PHP index.php et phototheque_ajax.php :

phototheque_ajax.php

<?php
/* ================LISTTE DES CATEGORIES================ */
/* ==1 liste des categories donc repertoires de albums== */
$chemin = 'albums/';
$repertoire = opendir($chemin);
while($element = readdir($repertoire)) { $liste[] = $element; }
natsort($liste);
$liste = array_values($liste);
$nombre = count($liste);
$Categorie = array();
$Categorie[0]="";
$nbrx=1;
for ($i=0; $i<$nombre; $i++)
{
if ($liste[$i] != "." && $liste[$i] != ".." && is_dir($chemin.$liste[$i]))
{
$Categorie[$nbrx]=$liste[$i];
$nbrx++;
}
}
closedir($repertoire);
/* ==============NBR PHOTOS PAR CATEGORIE============== */
$CategorieNbr = array();
$CategorieNbr[0]="";
for ($i=1; $i<$nbrx; $i++)
{
$chemin = 'albums/'.$Categorie[$i].'/';
$repertoire = opendir($chemin);
unset($liste);
while($element = readdir($repertoire)) { $liste[] = $element; }
natsort($liste);
$liste = array_values($liste);
$nombre = count($liste);
$nombreOK =1 ;
for ($i2=0; $i2<$nombre; $i2++)
{
$pos = strpos($liste[$i2], ".jpg");
if ($liste[$i2] != "." && $liste[$i2] != ".." && !is_dir($chemin.$liste[$i2]) && $pos>3)
{ $nombreOK++ ;   }
}
$CategorieNbr[$i]=$nombreOK;
closedir($repertoire);
}
?>

Quelques remarques : afin de simplifier la lecture du code, les tables des répertoires (catégories) et photos sont en base '1', La première catégorie est donc en [1].
Par ailleurs le nombre d'éléments est égal au nombre d'éléments +1 pour le rendre directement utilisable dans les boucles FOR, etc.

Gardez à l'esprit que le code permet d'utiliser plusieurs catégories sans avoir à modifier aucun code ! Cependant limitez-vous à dix maximum… le menu restera géré automatiquement comme ceci :

index.php

function menu()
{
var LeMenu="&nbsp;&nbsp;<a onclick='recul();' href='#'  class='LesA14' ><img src='logos/fleche_gauche.gif' id='Xx' alt='Retour' /></a>&nbsp;&nbsp;<img src='logos/pave.gif' id='Zz' alt='phototheque' />&nbsp;&nbsp;<a onclick='avance();' href='#'  class='LesA14' ><img src='logos/fleche_droite.gif' id='Yy' alt='Suite' /></a><br />";
LeMenu=LeMenu+"<div class='centrePF1'><span class='LaFonte_3_Coul1' >";
for (i=1; i<nbcateg; i++)
{
if(i==4 || i==7 || i==10) LeMenu=LeMenu+"<br />";
if(i>1 && i!=4 && i!=7 && i!=10) LeMenu=LeMenu+" - ";
if (i!=categorie) { LeMenu=LeMenu+"<a  href='#' onclick='ChangeCatego(100,"+i+",1,1);'  class='LesA12Phot'> "+nom_categorie[i]+" </a>";}
if (i==categorie) { LeMenu=LeMenu+"<a  href='#'  class='LesA12Phota'> "+nom_categorie[i]+" </a>";}
}
document.getElementById('LePave1').innerHTML = LeMenu+"</span></div>";
}

En effet les deux PHP possèdent le nombre et les libellés des catégories, ainsi que le nombre de photos de chaque catégorie (comme nous l'avons mentionné plus haut), mais dans le cas particulier de index.php toutes ces données sont présentes en PHP, mais également en JavaScript. En effet AJAX lui également a besoin de ces données.

Occasion de rappeler que souvent AJAX utilise des données communes avec PHP, vous pouvez voir la facilitée de gérer cette double information.

IV-B - Le ZOOM sur image

Ce mécanisme connu, et apprécié d'un zoom sur image, est presque toujours utilisé sur les sites en chargeant le jQuery qui contient ce mécanisme. Fidèle à ma série « En Clair », j'ai construit ce zoom sur image en associant la feuille de style et le JavaScript. Pour cette partie AJAX n'est pas sollicité, puisque le JavaScript et la feuille de style sont déjà dans index.php.

Chaque vignette est décrite ainsi :

index.php

<a href='#' class='photo'><img src='albumsv/diversv/montmartre-nuitv.jpg' alt='albums/divers/montmartre-nuit,jpg' class='photo' width='150' height='150' onclick='voir('albums/divers/montmartre-nuit.jpg');' /></a>

Donc lors du clic, la fonction voir() ; contenue dans phototheque.js et celles de ce fichier JavaScript vont mettre l'image grand format dans une imbrication de trois DIV qui sont ceux-ci :

index.php

<div id="DivVisualisation" class="DivVisualisation"></div>
<div id="DivGeneral" class="DivGeneral">
<div id="Divimage" class=Divimage" onclick="fermeture()">  </div>
<div id="DivTitre" class="DivTitre"> </div>
</div>

Avec en premier un DIV situé sous les trois DIV mais couvrant tout le reste de la page, enfin grâce au CSS qui permet d'opacifier la page. Ce qui donne donc pour la feuille de style :

phototheque.css

div.DivVisualisation
{
display: none; position: fixed; top: 0%; left: 0%;
width: 100%; height: 100%; background-color: #3a3a3a;
z-index:10; opacity:0.6; filter: alpha(opacity=60);
}
div.DivGeneral
{
display: none; position: fixed; padding: 0; margin:0;
border: 1px solid black; background-color: white;
z-index:11; top: 10%; left: 20%; overflow: auto;
}
div.Divimage
{
left:0; right:0; bottom:0; margin:0; padding: 8px; overflow: auto;
width:100%; height:100%;
}
div.DivTitre
{
left:0%; width:100%; height:20px; padding:0; margin:0;
color:black; text-align:center;
}

Dont l'analyse vous sera familière.

Alors le JavaScript peut s'exécuter pour donner le zoom sur la vignette cliquée.

phototheque.js

var coeff=4;
var largeur=600;var hauteur=600;

function voir(CheminNomImage)
{
var work = new Image();
work.src=CheminNomImage;
work.onload= function ()
{
largeur = this.width;
hauteur = this.height;
var DivGeneral = document.getElementById('DivGeneral');
document.getElementById('DivVisualisation').style.display='block';
var Titre = document.getElementById('DivTitre');
Titre.innerHTML = CheminNomImage;
var content = document.getElementById('Divimage');
content.style.padding="0";
coeff=4;
content.innerHTML = "<img src=" + CheminNomImage + " id='image'   />";
document.getElementById('image').width=Math.round(largeur/coeff);
document.getElementById('image').height = Math.round(hauteur/coeff);
DivGeneral.style.display='block';
LeZoom();
};
}
function fermeture()
{
document.getElementById('DivGeneral').style.display='none';
document.getElementById('DivVisualisation').style.display='none';
}

function LeZoom()
{
if (document.getElementById('image').width < largeur)
{
coeff = coeff-0.2;
document.getElementById('image').width = Math.round(largeur/coeff);
document.getElementById('image').height = Math.round(hauteur/coeff);
zz=window.setTimeout('LeZoom();',60);
}
else {window.clearTimeout(zz);}
}

IV-C - Conclusion

La simplicité à utiliser AJAX est mise en évidence dans le cas de cette photothèque, lorsque nous considérons les énormes codes diffusés sur le NET pour un résultat similaire.
Bonne découverte.

V - Remerciements

Je remercie zoom61 pour sa relecture attentive, ainsi que vermine. Je remercie également ceux qui m'ont aidé pour cet article.