AJAX en clair : Photothque

Par Christele Rubneau

Date de publication : 7 juillet 2013 Dernire mise jour : 7 juillet 2013

Tutoriel Ajax en clair - Comment raliser une photothque en AJAX Cet article, suite des articles AJAX en clair, prsente la gestion complte d'une photothque sans utiliser ni base de donnes, ni cookies, ni session, mettant en vidence (si besoins taient) la puissance et la souplesse du moteur AJAX.

AJAX en clair : Photothque par Christele Rubneau

I - Avant-propos........................................................................................................................................................... 3 II - Prrequis................................................................................................................................................................ 3 III - Dcouverte de l'article.......................................................................................................................................... 3 IV - Organisation et explication du code.....................................................................................................................4 IV-A - Actions communes aux deux PHP..............................................................................................................4 IV-B - Le ZOOM sur image....................................................................................................................................5 IV-C - Conclusion................................................................................................................................................... 7 V - Remerciements...................................................................................................................................................... 7

-2Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2013 christele_r. Aucune reproduction, mme 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 intrts. Cette page est dpose la SACD.

http://christele.developpez.com/tutoriels/ajax/ajax-en-clair-phototheque/

AJAX en clair : Photothque par Christele Rubneau

I - Avant-propos
S'adressant tous ceux qui matrisent la programmation permettant de grer un site Web , cet article a pour but d'aller encore plus loin dans l'utilisation du module AJAX. Developpez.com possde dj un grand nombre de tutoriels et d'articles sur AJAX. Le but du prsent article reste donc de mettre en vidence la multiple utilisation d'un seul et simple module AJAX.

II - Prrequis
Bon programmeur comme vous l'tes, vous matrisez 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 considr comme acquis !

III - Dcouverte de l'article

Le code de l'exemple dcrit dans cet article tant tlchargeable, nous n'affichons dans cet article que les parties de code justifiant des commentaires. Aussi, nous vous conseillons de tlcharger 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 facilite. Tlchargez l'ensemble de la photothque exemple ZIP de la photothque . Attention ce zip comprend toute une photothque soit 23 Mo (4 minutes de tlchargement) Apparence de l'exemple photothque :

Que vous pouvez tester ici : Testez la Photothque . Cette fois vous avez tout en main et il nous reste regarder et expliquer le mcanisme gnral du code.

-3Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2013 christele_r. Aucune reproduction, mme 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 intrts. Cette page est dpose la SACD.

http://christele.developpez.com/tutoriels/ajax/ajax-en-clair-phototheque/

AJAX en clair : Photothque par Christele Rubneau

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 utilises avec chacune leurs quatre phases faciles isoler : dans index.php,un ou des lments HTML appelant une fonction JavaScript ; la fonction JavaScript va en partie analyser les lments reus du HTML puis appeler le moteur AJAX ; le moteur AJAX ne fait que passer (ici en POST Asynchrone, voir AJAX en clair (1) ) les lments traiter au PHP phototheque_ajax.php ; le PHP phototheque_ajax.php contient lui aussi un code spcifique 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 reprsente (voir image plus haut) est dcrite dans index.php jusqu'aux images cliquables du menu. Le pav de vignettes tant gnr par phototheque_ajax.php. La fonction AJAX est appele sans action prcise 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 rpertoires, et noter pour chacun des rpertoires le nombre de photos contenues. Chaque rpertoire est une catgorie. Un outil vous est donn galement (phototheque_genere.php). Il vous servira chaque fois que vous ajouterez des photos ou rpertoires dans albums , gnrer les rpertoires 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 ;

-4Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2013 christele_r. Aucune reproduction, mme 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 intrts. Cette page est dpose la SACD.

http://christele.developpez.com/tutoriels/ajax/ajax-en-clair-phototheque/

AJAX en clair : Photothque par Christele Rubneau

phototheque_ajax.php

} ?>

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 rpertoires (catgories) et photos sont en base '1', La premire catgorie est donc en [1]. Par ailleurs le nombre d'lments est gal au nombre d'lments +1 pour le rendre directement utilisable dans les boucles FOR, etc. Gardez l'esprit que le code permet d'utiliser plusieurs catgories sans avoir modifier aucun code ! Cependant limitez-vous dix maximum le menu restera gr 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 possdent le nombre et les libells des catgories, ainsi que le nombre de photos de chaque catgorie (comme nous l'avons mentionn plus haut), mais dans le cas particulier de index.php toutes ces donnes sont prsentes en PHP, mais galement en JavaScript. En effet AJAX lui galement a besoin de ces donnes. Occasion de rappeler que souvent AJAX utilise des donnes communes avec PHP, vous pouvez voir la facilite de grer cette double information.

IV-B - Le ZOOM sur image

Ce mcanisme connu, et apprci d'un zoom sur image, est presque toujours utilis sur les sites en chargeant le jQuery qui contient ce mcanisme. Fidle ma srie 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 dj dans index.php. Chaque vignette est dcrite ainsi : index.php

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

-5Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2013 christele_r. Aucune reproduction, mme 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 intrts. Cette page est dpose la SACD.

http://christele.developpez.com/tutoriels/ajax/ajax-en-clair-phototheque/

AJAX en clair : Photothque par Christele Rubneau

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 grce 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 familire. Alors le JavaScript peut s'excuter pour donner le zoom sur la vignette clique. 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();

-6Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2013 christele_r. Aucune reproduction, mme 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 intrts. Cette page est dpose la SACD.

http://christele.developpez.com/tutoriels/ajax/ajax-en-clair-phototheque/

AJAX en clair : Photothque par Christele Rubneau

phototheque.js

}; } 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 photothque, lorsque nous considrons les normes codes diffuss sur le NET pour un rsultat similaire. Bonne dcouverte.

V - Remerciements
Je remercie http://www.developpez.net/forums/u53874/zoom61/ pour sa relecture attentive, ainsi que http:// www.developpez.net/forums/u226061/vermine/. Je remercie galement ceux qui m'ont aid pour cet article.

-7Les sources prsentes sur cette page sont libres de droits et vous pouvez les utiliser votre convenance. Par contre, la page de prsentation constitue une uvre intellectuelle protge par les droits d'auteur. Copyright 2013 christele_r. Aucune reproduction, mme 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 intrts. Cette page est dpose la SACD.

http://christele.developpez.com/tutoriels/ajax/ajax-en-clair-phototheque/