Forum d'entraide PHPFrance

Salut à tous!

Supposons que votre site comporte des pages montrant des images en miniature sur lesquels on doit cliquer pour les agrandir. Une fois l'agrandissement effectué, on voudrait pouvoir admirer les autres images, comme dans un diaporama.

Cette contribution consiste à fournir une idée de diaporama en PHP faisant appel à une base de données.

D'abord, dans la base de données, exécutez les requêtes suivantes.
"miniatures.php" désigne la page qui affiche les images en miniatures.

Ensuite, crééz votre page comportant les images en miniatures dans le dossier "dossier" de votre site. Ce peut être une simple page HTML (même si l'exemple se base sur un fichier "miniatures.php"). Elle doit notamment comporter ces lignes:
Si ça vous chante, vous pouvez faire un lien javascript ouvrant une fenêtre en pop-up (href="javascript:void(window.open('diaporama.php?sujet=miniatures&image=1', 'agrandissement', [paramètres d'ouverture de la fenêtre]))").

Créons à présent le fichier "diaporama.php" dans le même dossier que la page ci-dessus.

Créons à présent, dans le même dossier que la page ci-dessus, les fichiers "mysql.php" et "diaporama.php".

mysql.php

<?php 
// Paramètres de connexion au serveur de gestion de bases de données, avec identifiant et mot de passe (valeurs à modifier le cas échéant)
$connexion=mysql_connect("localhost", "root", "");

// Paramètres de connexion à la base de données (valeur à modifier selon le nom de la base de données)
$base=mysql_select_db("base");
?>

diaporama.php

<?php 
// On établit la connexion à la base de données en appelant le fichier approprié
include ("mysql.php");

// Récupération et vérification des valeurs passées par l'URL (diaporama.php?sujet=...&image=...)
$sujet=(isset($_GET['sujet']))? $_GET['sujet']: '';
$image=(isset($_GET['image']))? $_GET['image']: '';

// Paramètres permettant d'aller à l'image précédente ou suivante (-1 et +1 marchent mieux que l'incrémentation et la décrémentation de 1)
$precedent=$image-1;
$suivant=$image+1;

// Titre du diaporama: requête SQL et mise aux normes du codage HTML
$requete_titre="SELECT titre FROM liste WHERE page='$sujet.php'";
$resultat_titre=mysql_query($requete_titre);
$donnees_titre=mysql_fetch_array($resultat_titre);
if (mysql_num_rows($resultat_titre)==0) $titre='Si rien n&rsquo;est trouv&eacute;';
else $titre='Diaporama - '.htmlentities($donnees_titre['titre']);

// Total d'images pouvant être affichées par le diaporama en fonction du sujet: nouvelle requête SQL et création d'une variable récupérant le résultat du calcul
$requete_total_images="SELECT COUNT(id) AS total FROM diaporama WHERE url='$sujet'";
$resultat_total_images=mysql_query($requete_total_images);
$donnees_total_images=mysql_fetch_array($resultat_total_images);
$nb=$donnees_total_images['total'];

// Sélection de l'image à afficher en fonction des valeurs passées par l'URL: encore une requête SQL
$requete_images="SELECT nom, texte, url FROM diaporama WHERE cle='$image' AND url='$sujet'";
$resultat_images=mysql_query($requete_images);
$donnees_images=mysql_fetch_array($resultat_images);

// Application des règles CSS en fonction de la taille de l'image (je vous laisse faire le fichier CSS avec les paramètres width et height, donc rien de sorcier pour éviter d'étranges disproportions :wink: )
if (mysql_num_rows($resultat_images)!=0){ // Si au moins une image est trouvée
	list($largeur, $hauteur)=getimagesize("../images/".$donnees_images['nom'].""); // Chemin relatif des images
	if ($largeur<$hauteur) $taille='portrait'; else $taille='paysage';
}

// Afin de ne pas laisser faire n'importe quelle valeur passée par l'URL, édition d'un message d'erreur et redirection (ou fermeture de la fenêtre, si vous avez opté pour la pop-up) en cas de valeurs non valables
$fermeture='!-- Fermeture de la fenêtre --'; // Commentaire HTML
// Si l'URL est "diaporama.php", "diaporama.php?sujet=&image=", "diaporama.php?sujet=toto&image=tata", "diaporama.php?image=1", "diaporama.php?sujet=miniatures" ou "diaporama.php?sujet=miniatures&image=4", et j'en passe...
if (empty($sujet) || $sujet!=$donnees_images['url'] || empty($image) || $image>$nb || mysql_num_rows($resultat_total_images)==0 || mysql_num_rows($resultat_total_images)==0){
	$erreur='<strong>Une erreur s&rsquo;est produite.</strong>';
	$fermeture='meta http-equiv="refresh" content="1;URL=miniatures.php"'; // Si vous avez opté pour un simple lien
	$fermeture='meta http-equiv="refresh" content="1;URL=javascript:window.close()"'; // Si vous avez opté pour une pop-up
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><?php echo $titre ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<<?php echo $fermeture ?>>
<link href="../css/styles.css" rel="stylesheet" type="text/css">
<link href="../css/diaporamas.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php 
// Affichage du message d'erreur
if (empty($sujet) || $sujet!=$donnees_images['url'] || empty($image) || $image>$nb || mysql_num_rows($resultat_images)==0 || mysql_num_rows($resultat_images)==0) echo $erreur;

// Affichage du diaporama
else{
?>
<div id="diaporama">
  <div id="nombre">
    <strong><?php echo $image ?> sur <?php echo $nb ?></strong>
  </div>
  <div id="image">
    <img id="<?php echo $taille ?>" src="../images/<?php echo $donnees_images['nom'] ?>" alt="<?php echo $donnees_images['texte'] ?>" title="<?php echo $donnees_images['texte'] ?>">
  </div>  
  <div id="boutons">
<?php 
	if ($image>2){
?>
    <a href="diaporama.php?sujet=<?php echo $sujet ?>&image=1" title="Premi&egrave;re image"><img id="premier" src="../images/premier.gif" alt="Premi&egrave;re image" title="Premi&egrave;re image"></a>
<?php 
	}
	if ($image>1){
?>
	<a href="diaporama.php?sujet=<?php echo $sujet ?>&image=<?php echo $precedent ?>" title="Image pr&eacute;c&eacute;dente"><img id="precedent" src="../images/precedent.gif" alt="Image pr&eacute;c&eacute;dente" title="Image pr&eacute;c&eacute;dente"></a>
<?php 
	}
?>
	<a href="miniatures.php" <!-- ou bien href="javascript:window.close()" si vous avez opté pour une pop-up --> title="Retour"><img id="retour" src="../images/retour.gif" alt="Retour" title="Retour"></a>
<?php 
	if ($image<$nb){
?>
	<a href="diaporama.php?sujet=<?php echo $sujet ?>&image=<?php echo $suivant ?>" title="Image suivante"><img id="suivant" src="../images/suivant.gif" alt="Image suivante" title="Image suivante"></a>
<?php 
	}
	if ($image<$nb-1){
?>
	<a href="diaporama.php?sujet=<?php echo $sujet ?>&image=<?php echo $nb ?>" title="Derni&egrave;re image"><img id="dernier" src="../images/dernier.gif" alt="Derni&egrave;re image" title="Derni&egrave;re image"></a>
<?php 
	}
?>
  </div>
</div>
<?php 
}
?>
</body>
</html>

Et ça marche pour 1 ou pour 1 000 000 d'images par sujet.

Si jamais ces codes peuvent être améliorés ou s'il y a des failles de sécurité, n'hésitez pas à m'en parler.