photo.stereo.free.fr

Photo.Stereo - Photographie Stéréoscopie

  • Accueil
  • Livre d'or
  • Contact

Accueil

Bienvenue sur Photo Stéréo!

Photographie

  • Principe de fonctionnement
  • Vitesse et ouverture
  • Cadrage et composition
  • Vignetage et distorsion
  • Poses longues
  • Macrophotographie
  • Photographier le ciel de nuit
  • Photographier les orages
  • Galerie de photos

Stéréoscopie

  • Principe de fontionnement
  • Les différentes techniques
  • Pratique et réalisation
  • Galerie de photos
  • La 3D au cinéma
  • Autostéréogrammes

Tutoriel: album en PHP

  • Installation et configuration
  • Gestion de l'administration
  • Affichage des images

Tourisme photo: Montpellier

  • Activités en LR
  • Animaux
  • Monuments et édifices
  • Nature
  • Villes et villages
  • Visites

Album photos

  • Animaux
  • Ciels
  • Fleurs
  • Paysages
  • Les plus vus
  • Connexion (réservé)

Projets photos

  • Projet Fig'Art

Album photos en PHP - Affichage

Photo Stéréo > Tuturiel: album photos en PHP - Affichage

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:

Liste des rubriques

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!

Affichage des images

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.

Page précédente Page suivante

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!

Haut de page

A propos...

Magalie DUCROS

Photographe amatrice, informaticienne de profession, j'aime partager sur ces pages mes découvertes photographiques.
En voir plus...

Copyright

Site déposé sur CopyrightFrance.com

Aucune copie, même partielle, sans autorisation de l'auteur.

Navigation

  • Liens
  • Journal de bord
  • Plan du site


HTML5 Valide ! CSS3 Valide !

© 2003-2024 Magalie DUCROS