Comment faire une galerie d'image [Résolu]
Malamute7
- Messages postés
- 25
- Date d'inscription
- mercredi 25 juin 2008
- Dernière intervention
- 25 décembre 2010
- Messages postés
- 25
- Date d'inscription
- mercredi 25 juin 2008
- Dernière intervention
- 25 décembre 2010
A voir également:
- Comment faire une galerie d'image
- Galerie d'image avec réation de miniature et compression des originaux - Codes sources - PHP (Graphique)
- Galerie d'image avec réation de miniature et compression des originaux : correction - Codes sources - PHP (Graphique)
- Galerie d'images - Codes sources - PHP (Graphique)
- Imag'inat0r : galerie d'image paramétrable utilisant mysql - Codes sources - PHP (Graphique)
- Javascript : Galerie d'images - gestion de descriptions et des miniatures - CodeS SourceS - Guide
7 réponses
Meilleure réponse
- Messages postés
- 2492
- Date d'inscription
- jeudi 30 novembre 2006
- Dernière intervention
- 14 janvier 2011
Ah oui, je suis sûr... PHP ne PEUT PAS afficher quoi que ce soit sans être appelé explicitement. C'est à dire qu'une fois ta page chargée, PHP N'en a plus rien à faire, puisqu'il est exécuté sur le serveur, et pas chez le client (navigateur). Il n'y a que des scripts côté client qui peuvent être exécutés, dont javascript... C'est lui qui, dans ce cas, appelle PHP pour savoir ce qu'il en dit...
Mais vraiment, jette un oeil à jQuery, tu seras surpris de la simplicité avec laquelle ton problème se résoud...
Je vais essayer de te convaincre, parce que ce serait dommage d'abandonner si près du but (surtout avec une lib comme jQuery qui facilite grandement la vie pour les gens qui, comme moi, ne supportent pas javascript).
Une première ligne pour inclure le script jQuery.
Dans ton code HTML, il te suffit d'avoir un élément
dans lequel tu affichera tes images : c'est dans cet élément
que tu inclus le script PHP qui va chercher les images dans ta base de données. Ce script PHP doit afficher (avec echo()) du HTML, mais uniquement ce qui va dans le
.
Ensuite, un petit script js qui va appeler le script PHP (jquery se charge tout seul de l'appeler et de mettre où tu lui dis le résultat) et remplir l'élément
avec ce que le script PHP a produit.
Mettons que ton élément
à remplir porte l'id galerie:
Lors du premier chargement de ta page, ton script galerie.php va effectuer deux requêtes :
- SELECT SQL_CALC_FOUND_ROWS * FROM photo LIMIT $offset,3;
Ca, ça te donne d'abord les 3 photos que tu veux afficher sur ta page la première fois. Il faut penser à calculer $offset en fonction du numéro de la page demandée, comme je te l'ai indiqué dans un message précédent. Oui, il faut utiliser la variable $_GET : mais ce sera transparent pour l'utilisateur qui ne rechargera pas la page et ne verra donc jamais de truc du genre : ?page=2
- SELECT FOUND_ROWS();
Là, tu récupères le nombre total de photos présentes qui satisfont les critères (si tu mettais une clause WHERE par exemple, ça ne compterait que les photos qui satisfont la clause WHERE, mais sans tenir compte de la limite imposée par LIMIT $offset,3). Mettons que tu stockes cette donnée dans $nb_photos.
Ton script galerie.php va ensuite générer du code HTML pour les 3 photos. Qu'il s'agisse d'un tableau HTML, d'une liste avec un bon CSS ou de quelques
flottants, peu importe. Ca affiche les 3 photos. Il doit aussi afficher les liens pour les différentes pages. Admettons, pour faire simple, que tu affiches les liens pour toutes les pages (sinon, tu pourrais regénérer la barre de pagination, c'est pas plus compliqué, juste un peu plus long et pas indispensable pour que tu comprennes le principe).
Les liens seront du genre : ton_script_principal.php?page=2
Pas de panique, la page ne sera pas rechargée... C'est juste qu'il faut (enfin c'est un choix perso, mais honnêtement, c'est mieux de le prévoir comme ça) que les navigateurs qui n'ont pas javascript activé puissent suivre les liens (c'est notamment le cas des moteurs de recherche !). Concrètement, si le lien est suivi tel quel, ça recharge la page complètement avec la variable $_GET['page'] valant 2. Le script inclus, que j'appelle galerie.php, le sera avec cette fois $offset valant 3 et non plus 0, du fait qu'on affiche la page 2...
bref. Ensuite, jQuery va réécrire A LA VOLEE les liens sur ces éléments lorsque l'on cliquera dessus, le lien ne sera pas suivi... Pour cela, il suffit dans le script js de faire return false;
Ton script PHP, jusqu'à présent, écrit les numéros de page dans le lien... Tu reprends ce numéro pour l'afficher dans le script sur le lien :
Ce qui produira un code HTML pour le lien de ce genre, pour le lien vers la page 2 :
[mon_script.php?page=2 Page 2]
Il reste à écrire la fonction js qui va charger le nouveau contenu dans le
dont on parlait plus haut :
Ca ressemblerait à ça :
C'est tout... Explications :
$('#galerie') : indique à jQuery quel élément du document on souhaite manipuler
.load : charge un document HTML distant et l'injecte dans le document, plus précisément, dans la balise indiquée (entre
et
pour notre cas)
('/galerie.php', num_page) : l'appel au script PHP qui va générer le HTML à insérer, 2 étant le numéro de la page.
Franchement, même si les explications sont un peu longues, c'est pas bien difficile, non ? ^^
Lien utile : doc jQuery sur la fonction load()
--
Neige
N'hésitez pas à lire la doc
Mais vraiment, jette un oeil à jQuery, tu seras surpris de la simplicité avec laquelle ton problème se résoud...
Je vais essayer de te convaincre, parce que ce serait dommage d'abandonner si près du but (surtout avec une lib comme jQuery qui facilite grandement la vie pour les gens qui, comme moi, ne supportent pas javascript).
Une première ligne pour inclure le script jQuery.
Dans ton code HTML, il te suffit d'avoir un élément
dans lequel tu affichera tes images : c'est dans cet élément
que tu inclus le script PHP qui va chercher les images dans ta base de données. Ce script PHP doit afficher (avec echo()) du HTML, mais uniquement ce qui va dans le
.
Ensuite, un petit script js qui va appeler le script PHP (jquery se charge tout seul de l'appeler et de mettre où tu lui dis le résultat) et remplir l'élément
avec ce que le script PHP a produit.
Mettons que ton élément
à remplir porte l'id galerie:
Lors du premier chargement de ta page, ton script galerie.php va effectuer deux requêtes :
- SELECT SQL_CALC_FOUND_ROWS * FROM photo LIMIT $offset,3;
Ca, ça te donne d'abord les 3 photos que tu veux afficher sur ta page la première fois. Il faut penser à calculer $offset en fonction du numéro de la page demandée, comme je te l'ai indiqué dans un message précédent. Oui, il faut utiliser la variable $_GET : mais ce sera transparent pour l'utilisateur qui ne rechargera pas la page et ne verra donc jamais de truc du genre : ?page=2
- SELECT FOUND_ROWS();
Là, tu récupères le nombre total de photos présentes qui satisfont les critères (si tu mettais une clause WHERE par exemple, ça ne compterait que les photos qui satisfont la clause WHERE, mais sans tenir compte de la limite imposée par LIMIT $offset,3). Mettons que tu stockes cette donnée dans $nb_photos.
Ton script galerie.php va ensuite générer du code HTML pour les 3 photos. Qu'il s'agisse d'un tableau HTML, d'une liste avec un bon CSS ou de quelques
flottants, peu importe. Ca affiche les 3 photos. Il doit aussi afficher les liens pour les différentes pages. Admettons, pour faire simple, que tu affiches les liens pour toutes les pages (sinon, tu pourrais regénérer la barre de pagination, c'est pas plus compliqué, juste un peu plus long et pas indispensable pour que tu comprennes le principe).
Les liens seront du genre : ton_script_principal.php?page=2
Pas de panique, la page ne sera pas rechargée... C'est juste qu'il faut (enfin c'est un choix perso, mais honnêtement, c'est mieux de le prévoir comme ça) que les navigateurs qui n'ont pas javascript activé puissent suivre les liens (c'est notamment le cas des moteurs de recherche !). Concrètement, si le lien est suivi tel quel, ça recharge la page complètement avec la variable $_GET['page'] valant 2. Le script inclus, que j'appelle galerie.php, le sera avec cette fois $offset valant 3 et non plus 0, du fait qu'on affiche la page 2...
bref. Ensuite, jQuery va réécrire A LA VOLEE les liens sur ces éléments lorsque l'on cliquera dessus, le lien ne sera pas suivi... Pour cela, il suffit dans le script js de faire return false;
Ton script PHP, jusqu'à présent, écrit les numéros de page dans le lien... Tu reprends ce numéro pour l'afficher dans le script sur le lien :
[mon_script.php?page=<?php echo $page; ?> )" >Page <?php echo $page; ?>]
Ce qui produira un code HTML pour le lien de ce genre, pour le lien vers la page 2 :
[mon_script.php?page=2 Page 2]
Il reste à écrire la fonction js qui va charger le nouveau contenu dans le
dont on parlait plus haut :
Ca ressemblerait à ça :
<script type="text/javascript">
function charge_page(num_page) {
$('#galerie').load('/galerie.php', num_page);
}
</script>
C'est tout... Explications :
$('#galerie') : indique à jQuery quel élément du document on souhaite manipuler
.load : charge un document HTML distant et l'injecte dans le document, plus précisément, dans la balise indiquée (entre
et
pour notre cas)
('/galerie.php', num_page) : l'appel au script PHP qui va générer le HTML à insérer, 2 étant le numéro de la page.
Franchement, même si les explications sont un peu longues, c'est pas bien difficile, non ? ^^
Lien utile : doc jQuery sur la fonction load()
--
Neige
N'hésitez pas à lire la doc
Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire
89 internautes nous ont dit merci ce mois-ci
- Messages postés
- 2492
- Date d'inscription
- jeudi 30 novembre 2006
- Dernière intervention
- 14 janvier 2011
salut,
Il faut appeler ton script avec en argument le numéro de la page que tu veux. Par exemple :
galerie.php?page=2
Il faut alors récupérer la valeur du numéro de page avec $_GET['page'], s'assurer que c'est bien un entier avec is_int() ou forcer son type à un entier avec settype(), et vérifier que la valeur est bien supérieure à zéro (et la mettre à 1 si inférieure à 1)
Il faut alors calculer le premier enregistrement de la page demandée :
$compteur = ($page - 1) * $nb_par_page;
où $page est le numéro de la page et $nb_par_page le nombre d'éléments que tu veux récupérer (dans ton cas, 3 si j'ai bien compris)
Et normalement, c'est à peu près tout... A toi de prévoir le cas où aucune image n'est retournée parce que le numéro de page dans l'url est trop élevé.
Il faut appeler ton script avec en argument le numéro de la page que tu veux. Par exemple :
galerie.php?page=2
Il faut alors récupérer la valeur du numéro de page avec $_GET['page'], s'assurer que c'est bien un entier avec is_int() ou forcer son type à un entier avec settype(), et vérifier que la valeur est bien supérieure à zéro (et la mettre à 1 si inférieure à 1)
Il faut alors calculer le premier enregistrement de la page demandée :
$compteur = ($page - 1) * $nb_par_page;
où $page est le numéro de la page et $nb_par_page le nombre d'éléments que tu veux récupérer (dans ton cas, 3 si j'ai bien compris)
Et normalement, c'est à peu près tout... A toi de prévoir le cas où aucune image n'est retournée parce que le numéro de page dans l'url est trop élevé.
- Messages postés
- 25
- Date d'inscription
- mercredi 25 juin 2008
- Dernière intervention
- 25 décembre 2010
non ce que je voulais c'est ne pas utiliser 5 pages justement
mais qu en appuyant sur suivant ou précédent mes photos changes
en gros sur ma page j ai photo 1-2-3 en cliquant sur suivant la page affiche désormais 4-5-6 et sur précédent 1-2-3
tous sa sur la même page et ne pas utiliser mes 5 pages
mais qu en appuyant sur suivant ou précédent mes photos changes
en gros sur ma page j ai photo 1-2-3 en cliquant sur suivant la page affiche désormais 4-5-6 et sur précédent 1-2-3
tous sa sur la même page et ne pas utiliser mes 5 pages
- Messages postés
- 2492
- Date d'inscription
- jeudi 30 novembre 2006
- Dernière intervention
- 14 janvier 2011
Ah ok, désolé, j'ai mal compris...
Alors tu as le choix entre javascript et Flash.
Soit tu codes une animation flash qui chargera les images à la volée, soit tu fais ça en javascript.
Quoi qu'il en soit, ce n'est pas du PHP.
Javascript devra appeler un script PHP (que tu as déjà, hein, reste à lui indiquer la page que tu veux, ça tu peux pas l'empêcher) et recharger le contenu d'un élément HTML (communément un div) avec le code HTML retourné. C'est pas à proprement parler de l'AJAX puisqu'il n'y a pas d'XML (encore que... si ton script PHP renvoie du xhtml, c'est bien du xml), mais le principe est le même.
L'idée, donc est d'avoir un script PHP que tu appelles avec le numéro de la page à l'aide de javascript, comme je te l'expliquais, et qui renvoie du HTML qui s'insèrera dans ton document existant.
Tu as pour cela besoin d'un objet XmlHTTPRequest. Donc soit tu te fades tout ça à la main, soit tu utilises une bibliothèque existante comme mooTools, jQuery, etc. Les docs de ces bibliothèques (au moins celle de jQuery, que j'utilise régulièrement) expliquent comment faire ça.
Lors du premier chargement de la page, tu risque d'appeler le script qui génère le code HTML des images avec un include. Pense alors à calculer combien d'enregistrements il y a au total grâce à la fonction mysql SQL_CALC_FOUND_ROWS, à utiliser dans la requête SELECT. La requête suivante :
te renverra alors le nombre total d'éléments qui correspondent à la requête sans LIMIT (donc si tu as au total 27 images et que ta requêtes, avec LIMIT n'en retourne que 3, la seconde requête te permettra de savoir qu'au total il y a 27 images, donc 9 pages).
Voilà voilà... Pour la suite, si tu as d'autres questions, je pense que ce sera sur javascriptfr plutôt que phpcs ;)
Bon courage !
Alors tu as le choix entre javascript et Flash.
Soit tu codes une animation flash qui chargera les images à la volée, soit tu fais ça en javascript.
Quoi qu'il en soit, ce n'est pas du PHP.
Javascript devra appeler un script PHP (que tu as déjà, hein, reste à lui indiquer la page que tu veux, ça tu peux pas l'empêcher) et recharger le contenu d'un élément HTML (communément un div) avec le code HTML retourné. C'est pas à proprement parler de l'AJAX puisqu'il n'y a pas d'XML (encore que... si ton script PHP renvoie du xhtml, c'est bien du xml), mais le principe est le même.
L'idée, donc est d'avoir un script PHP que tu appelles avec le numéro de la page à l'aide de javascript, comme je te l'expliquais, et qui renvoie du HTML qui s'insèrera dans ton document existant.
Tu as pour cela besoin d'un objet XmlHTTPRequest. Donc soit tu te fades tout ça à la main, soit tu utilises une bibliothèque existante comme mooTools, jQuery, etc. Les docs de ces bibliothèques (au moins celle de jQuery, que j'utilise régulièrement) expliquent comment faire ça.
Lors du premier chargement de la page, tu risque d'appeler le script qui génère le code HTML des images avec un include. Pense alors à calculer combien d'enregistrements il y a au total grâce à la fonction mysql SQL_CALC_FOUND_ROWS, à utiliser dans la requête SELECT. La requête suivante :
SELECT FOUND_ROWS();
te renverra alors le nombre total d'éléments qui correspondent à la requête sans LIMIT (donc si tu as au total 27 images et que ta requêtes, avec LIMIT n'en retourne que 3, la seconde requête te permettra de savoir qu'au total il y a 27 images, donc 9 pages).
Voilà voilà... Pour la suite, si tu as d'autres questions, je pense que ce sera sur javascriptfr plutôt que phpcs ;)
Bon courage !
- Messages postés
- 2492
- Date d'inscription
- jeudi 30 novembre 2006
- Dernière intervention
- 14 janvier 2011
Et bo**** d'éditeur wysiwyg à la c** qui vire le majuscules dans les codes... Comme si tout était insensible à la casse comme VB ou ASP... pffffffffffff
Normalement, FOUND_ROWS() doit s'écrire en capitales, même si MySQL est tolérant (ça va que là c'est mysql, mais quand c'est du PHP, c'est vraiment important de préciser que c'est en capitales arrrrgggrrrrrrrr)
Normalement, FOUND_ROWS() doit s'écrire en capitales, même si MySQL est tolérant (ça va que là c'est mysql, mais quand c'est du PHP, c'est vraiment important de préciser que c'est en capitales arrrrgggrrrrrrrr)
- Messages postés
- 25
- Date d'inscription
- mercredi 25 juin 2008
- Dernière intervention
- 25 décembre 2010
autrement dis je n'y songe meme pas ^^
ok je vais rester donc avec mes 5 pages
la c est vraiment trop compliquer ^^
je pensai qu il y avais un moyen simple
je partai du principe que compteur egal 0
que j affiche seulemen 3 images
si j ai 14 images
sa me fera donc 5 pages de 3 images
hors avec 2 boutons j aurai pu si je me trouve
sur le page 2 qui contien photo 3-4-5
juste simple changer les foto de la page 2
et mettre la 0-1-2 ou la 6-7-8
mais je vais me contenter d afficher la page 1 ou page 3 lol
t es bien sur qu il n y a pas plus simple que ta solution ?
ok je vais rester donc avec mes 5 pages
la c est vraiment trop compliquer ^^
je pensai qu il y avais un moyen simple
je partai du principe que compteur egal 0
que j affiche seulemen 3 images
si j ai 14 images
sa me fera donc 5 pages de 3 images
hors avec 2 boutons j aurai pu si je me trouve
sur le page 2 qui contien photo 3-4-5
juste simple changer les foto de la page 2
et mettre la 0-1-2 ou la 6-7-8
mais je vais me contenter d afficher la page 1 ou page 3 lol
t es bien sur qu il n y a pas plus simple que ta solution ?
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.