Affichage des imagettes et des images
Et voici enfin la partie la plus intéressante de ce projet, puisque c'est la seule qui sera réellement vue par vos visiteurs: la page de visualisation de vos photographies. Et c'est aussi maintenant que vous allez avoir le rendu du travail effectué sur les pages d'administration. Nous appellerons cette page BDDPhotos_album.php.
Le principe est le suivant:
Le visiteur choisit dans une liste déroulante la rubrique (FLEURS, CIELS, ...) qu'il souhaite visionner et valide son choix en cliquant sur un bouton. Un nombre défini de miniatures correspondant à cette rubrique s'affiche alors sous la liste. Le visiteur peut naviguer entre les pages de l'album si cette rubrique possède suffisement d'images pour être affichée sur plusieurs pages. En cliquant sur une imagette, le visiteur obtient la photographie choisie affichée en taille réelle dans une page séparée.
Nous avons déjà vu, pendant la création des pages d'administration, comment créer une liste déroulante contenant l'ensemble des rubriques disponibles dans la base de données. Il nous suffit de réutiliser ce code associé à un bouton, ce qui nous donne:
Gérons à présent l'appui sur ce bouton...
Nous commençons par effectuer une requête sur la rubrique choisie pour en obtenir la description et le nombre d'images qu'elle contient: "mysql_result" retourne le champ demandé d'un résultat. Ces informations seront affichées sous la liste déroulante.
// La description
$query = "SELECT RubriqueDesc AS RubDesc
FROM Rubrique
WHERE RubriqueID='$RubriqueID'";
$result = mysql_query($query) or die("ERROR");
$RubDesc = mysql_result($result,0,"RubDesc");
// Le nombre d'images
$query = "SELECT count(ImageID) AS ImgCount
FROM Image
WHERE RubriqueID='$RubriqueID'";
$result = mysql_query($query) or die("ERROR");
$ImgCount = mysql_result($result,0,"ImgCount");
echo "<br/><br/>$RubDesc<br/><br/>$ImgCount image(s)<br/><br/>";
Passons maintenant à l'affichage proprement dit des images. Il nous faut afficher chaque miniature (min_nomdelimage.jpg) et le nom de l'image associé.
Nous retrouvons ici la fonction "ImageCreateFromJPEG" dont nous avions parlé pour la création de la page d'administration d'ajout des images. Elle nous permet de récupérer la taille exacte de la miniature pour l'afficher correctement. Les imagettes sont affichées dans un tableau dont on gère le nombre de cases par ligne, au nombre de 4 maximum.
Affichage de toutes les images de la rubrique sélectionnée:
// Commence la table dans laquelle sont affichées les imagettes
echo "<table border='0' width='100%'><tr>";
// Récupère la liste des images de la rubrique sélectionnée
$query = "SELECT ImageID, ImageName, ImageRes, ImageSize
FROM Image
WHERE RubriqueID='$RubriqueID'
ORDER BY ImageName";
$result = mysql_query($query);
// On veut afficher 4 images par ligne
$NbrImgParLigne = 4;
$NumImgLigne = 0;
// Traite les images une après les autres
while ($row = mysql_fetch_array($result))
{
// Passe l'affichage des images à la ligne si 4 images affichées
if ($NumImgLigne>=$NbrImgParLigne)
{
echo "</tr><tr>";
$NumImgLigne = 0;
}
$NumImgLigne++;
// Commence une colonne de la grille pour y inclure l'image
echo "<td align='center'>";
// Récupère l'ID et le nom de l'image, en déduit le nom de la miniature
$ImageID = $row['ImageID'];
$ImageName = $row['ImageName'];
$MinImageName = "min_$ImageName";
// Chemin absolu de l'imagette
$ImagetteAbsolutePath = "../photos/".$RubriqueName."/".$MinImageName;
// Récupère les dimentions de l'imagette
$JPEGRes = ImageCreateFromJPEG($ImagetteAbsolutePath);
$xsrc = imagesx($JPEGRes);
$ysrc = imagesy($JPEGRes);
// Affiche le nom de l'image et sa miniature
echo "$ImageName<br/><img src='$ImagetteAbsolutePath'
width='$xsrc' height='$ysrc' border='0' alt='$ImageName'>";
// Termine la colonne de la grille pour cette image
echo "</td>";
}
// Termine la grille
echo "</tr></table>";
Félicitations, vous venez d'afficher la première page de votre album photos!
Si vous obtenez une erreur sur la fonction ImageCreateFromJPEG, décommentez la ligne extension=php_gd2.dll dans le fichier php.ini pour pouvoir accéder aux fonctions de la librairie GD.
Pour qu'un clic sur l'imagette entraine l'affichage de l'image choisie en plein écran, modifiez simplement l'affichage de l'imagette en lui ajoutant un lien:
$ImageAbsolutePath = "../photos/".$RubriqueName."/".$ImageName;
echo "<a href='$ImageAbsolutePath' target='blank'>$ImageName
<br/><img src='$ImagetteAbsolutePath'
width='$xsrc' height='$ysrc' border='0' alt='$ImageName'></a>";
Nous allons maintenant nous limiter à l'affichage de 16 imagettes (4x4) afin d'introduire la notion de pages dans notre album photos, l'idéal étant de récupérer la résolution de l'écran de vos visiteurs et d'adapter le nombre d'imagettes affichées en fonction de celle-ci. La solution pour ne récupérer qu'un nombre défini d'enregistrements à partir q'une requête SQL est d'utiliser la fonction LIMIT. Nous pouvons modifier notre requête précédente afin de ne récupérer que 16 images à partir de la 32ème par exemple:
$query = "SELECT ImageID, ImageName, ImageRes, ImageSize
FROM Image
WHERE RubriqueID='$RubriqueID'
ORDER BY ImageName
LIMIT 32, 16";
$result = mysql_query($query) or die("ERROR");
Comme vous l'avez compris, nous afficherons ainsi la page 3 de notre album photos.
Dans le cas où la page à afficher contiendrait moins de 16 images, la fonction "mysql_numrows" va nous aider pour obtenir le nombre exact d'images retourné par cette requête:
// Nombre de lignes résultant de la requête
$TotalRows = mysql_numrows($result);
Nous allons maintenant créer les deux liens permettant de naviguer entre les pages: Page précédente et Page suivante. Il nous faut pour cela inclure deux variables dans nos scripts: $OffsetImg qui représente le numéro de la première image affichée dans une page et $NbrImgParPage qui correspond au nombre d'images maximal sur une page. On fixera $NbrImgParPage=16; et on remplacera les nombres 32 et 16 de la requête précédente par ces variables.
Nous allons nous servir du passage de variables par URL pour indiquer à la future page affichée la rubrique en cours et le numéro de la première image. Un paramètre se passe en terminant l'URL par un ? suivi du nom de la variable = sa valeur. Plusieurs variables peuvent être spécifiées, il faut alors les séparer par un &. On les récupère comme dans l'exemple suivant: $OffsetImg = $_GET['offset']; offset étant la variable passée par URL. Dans le cas où cette variable ne serait pas spécifiée dans l'URL, pensez à l'initialiser à 0.
On obtiendra ainsi le code suivant.
Page précédente:
// S'il des images à afficher sur une page précédente
if ($OffsetImg > 0)
{
$NewOffsetImg = $OffsetImg - $NbrImgParPage;
echo "<< <a href='BDDPhotos_album.php?
offset=$NewOffsetImg&RubriqueID=$RubriqueID'>
Page précédente</a>";
}
Page suivante:
// S'il reste des images à afficher sur la page suivante
$LastImgPage = $OffsetImg + $TotalRows;
if ($LastImgPage < $ImgCount)
{
echo "<a href='BDDPhotos_album.php?
offset=$LastImgPage&RubriqueID=$RubriqueID'>
Page suivante</a> >>";
}
$RubriqueID peut provenir soit du formulaire, soit de l'URL. Vous pouvez donc le récupérer par $_POST['frm_select_rubrique'] dans le premier cas et par $_GET['RubriqueInfo'] dans le second.
Votre album photos est maintenant terminé. Il ne reste plus qu'à lui apporter quelques améliorations, comme la prise en compte de la résolution de l'écran de vos visiteurs pour déterminer le nombre d'images à afficher ou l'affichage des numéros de pages entre page suivante et page précédente pour un accès immédiat. Vous pouvez également améliorer la présentation en entourant les imagettes et en donnant plus d'informations sur les images au passage de la souris. Bon développement!
Tweeter