Forum d'entraide PHPFrance

Bonjour,

Je suis complètement novice en programmation et j'essaie de faire une galerie d'images.
Pour simplifier l'explication, voilà des screenshots détaillés de la page :
http://img4.hostingpics.net/pics/646938screen1.jpg
http://img4.hostingpics.net/pics/852985screen2.jpg

Pour afficher les thumbnails, je fais appel à une base de donnée réunissant ces informations sur chaque image :
* ID
* Lien vers le thumbnail
* Lien vers l'image
* Lien vers l'image précédente
* Lien vers l'image suivante

Mon problème est que je n'arrive pas à programmer les boutons "précédents" et "suivants" de façon à ce que les url vers lesquels ils pointent s'actualisent lorsque l'on change d'image principale.
Voici le code que j'ai pour l'instant :

<nav>
<ul>				<!-- J'appelle la base de données pour assigner la valeur de base à  ID (par défaut, celle de la dernière entrée) -->
	<?php try	{
		$bdd = new PDO('mysql:host=localhost;dbname=basededonnees', 'root', '');
					}			
			catch (Exception $e)
			{die('Erreur : ' . $e->getMessage());}
		$reponse = $bdd->query('SELECT * FROM posters ORDER BY ID DESC LIMIT 0, 1');
		$donnees = $reponse->fetch()
					{
			$ID= $donnees['ID'],
					}
		$reponse->closeCursor();
	?>			<!-- Je rappelle la base pour appeller les 10 dernières entrées -->
	<?php try	{
		$bdd = new PDO('mysql:host=localhost;dbname=basededonnees', 'root', '');
					}			
			catch (Exception $e)
			{die('Erreur : ' . $e->getMessage());}
		$reponse = $bdd->query('SELECT * FROM posters ORDER BY ID DESC LIMIT 0, 10');
		while ($donnees = $reponse->fetch())
					{
	?>			<!-- Je fais une liste de 10 thumbnails. En cliquant, un thumbnail doit modifier la variable qui permettra de changer la requête SQL suivante -->

<li><a href="#up">
<img src="<?php echo $donnees['Thumbnail']; ?>.jpg" alt="miniature" onclick="<!-- Là  il me faudrait une fonction pour changer la variable $ID par $donnees['ID'] (et si besoin qui indique qu'il faut rafraichir l'info pour qu'elle s'applique à  la requête suivante)-->">
</a></li>
	<?php
					} 
		$reponse->closeCursor();
	?>
</ul>
</nav>
<article>		<!-- J'appelle à  nouveau la base de données mais cette fois je ne veux que l'élément dont l'ID correspond au thumbnail sélectionné plus haut-->

	<?php try	{
		$bdd = new PDO('mysql:host=localhost;dbname=basededonnees', 'root', '');
				}			
			catch (Exception $e)
			{die('Erreur : ' . $e->getMessage());}
		$reponse = $bdd->query('SELECT * FROM posters WHERE ID = '.$ID.'');
		$donnees = $reponse->fetch()
				{
	?>
<h2 id="up">Cliquez sur l'une des miniatures &agrave; gauche pour afficher le dessin sur la page.</h2>
<p>Le dessin affich&eacute; peut encore &ecirc;tre aggrandi en cliquant dessus.</p>
<!--Image précédente-->	<a href="#grand" onclick="document.getElementById('grand').src='<?php echo $donnees['Previous']; ?>.jpg'"><img src="../empty.png" id="previous" onclick="<!-- Une fonction qui soustrait 1 à  $ID (minimum 1) et rafraichit l'info pour la requête précédente -->"></a>
<!--Image suivante-->		<a href="#grand" onclick="document.getElementById('grand').src='<?php echo $donnees['Next']; ?>.jpg'"><img src="../empty.png" id="next" onclick="<!-- Une fonction qui additionne 1 à  $ID (maximum l'ID le plus haut existant dans la table de données) et rafraichit l'info pour la requête précédente -->"></a>
<!--Réduire l'image-->		<a href="#up" onclick="document.getElementById('close').src='../empty.png',document.getElementById('previous').src='../empty.png',document.getElementById('next').src='../empty.png'"><img src="../empty.png" id="close"></a>
<!--Agrandir l'image-->		<a href="#grand" class="expand" onclick="document.getElementById('close').src='../close2.png',document.getElementById('previous').src='../previous2.png',document.getElementById('next').src='../next2.png'">
<!--Image-->				<img src="<?php echo $donnees['Poster']; ?>.jpg" id="grand" alt="poster"></a>
	<?php
				} 
		$reponse->closeCursor(); 
	?>
</article>

En attendant de résoudre ce problème, j'utilise un autre code un peu plus simple qui n'inclue pas les boutons "suivant" et "précédent" et qui fonctionne très bien :
je ne me sers pas de variable $ID et l'image qui s'affiche dans 'grand' est renseignée par onclick="document.getElementById('grand').src='<?php echo $donnees['Poster']; ?>.jpg'" dans la balise des thumbnails.

Quelqu'un aurait-il une ou plusieurs idées pour m'aider à résoudre mon problème ?
Dans tous les cas, essayez de rester au plus simple, mon niveau est vraiment bas .

Merci beaucoup !

salut,


Tu donne la solution toi même, il faut utiliser les id, mais les colonnes suivant et précédent de ta base pour le passer dans les liens vers la même page.

le précédent
<a href="<?php echo $_SERVER['PHP_SELF'].'?id='.$idPrecedent.'">Précedent</a>
<a href="<?php echo $_SERVER['PHP_SELF'].'?id='.$idSuivant.'">Suivant</a>

les id precedent et suivant devraient provenir de la table.

Lorsque tu affiche la page tu vérifie s'il y a le paramètre id dans $_GET si oui tu affiche l'image concernée (avec un where sur l'id) etc etc

@+

Merci pour cette rapidité !

En fait ce qui m'ennuie avec cette solution c'est que ça nécessite de recharger la page.
Si jamais je ne trouve rien de mieux c'est ce que je ferais, mais dans la mesure du possible je préférerais vraiment que tout se fasse en restant sur la même page, ce qui permettrait une transition plus agréable à regarder.

=> ajax la requete fournit le lien vers l'image précédente ou suivante.
pour cela tu passe en paramètre l'id courant et le suivant (suivant / précédent). le script va chercher dans la table le nom de l'image correspondant.
ensuite tu sais déjà modifier l'url de l'image.

une librairie JS comme jQuery pourrait pas mal t'aider.

tu peux chercher sur net un "caroussel" et tu devrais trouver pas mal de chose comme celui ci


@+

Ca a l'air parfait ! Je vais y jeter un oeil.

Merci beaucoup en tout cas, je vais essayer de voir ça assez vite pour informer au plus vite de mes éventuels problèmes / résolution du sujet.