Défilement des photos dans la galerie photo donnée en exemple

Bonjour,

j'ai bien vu sur ce site ( http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript ) comment faire une galerie photo.

En fait, j'aimerais pouvoir n'afficher que 10 miniatures à la fois et avoir de chaque coté une flèche précedente et suivante qui affichent les 10 miniatures suivantes ou precedentes.

De plus, j'aimerais en faire autant pour la grande photo, c'est a dire avoir une fleche suivante et precedente qui affiche la grande photo suivante.

J'ai essayé de faire ca en PHP mais je n'y arrive pas et je ne vois pas comment faire ca en Javascript...

Auriez des infos à me communiquer pour me mettre sur la voie, ou des exemples.

Merci d'avance.

Bruno.
Modifié par Olivier (27 Apr 2005 - 10:52)

Là, il faudra faire une base PHP à la galerie pour gérer ça et utiliser la technique du tuto par dessus en la modifiant légèrement. Mais le multipage, tu ne le rendras proprement et accessiblement qu'avec PHP.

J'ai déjà essayer en php mais je n'y arrive pas...

En fait, si j'ai bien compris, il faut regénérer la liste des miniatures à chaque clic sur le bouton suivant (ou précedent)... mais comment faire???

Faut-il créer la galerie dans un fichier "gallery.php" qui prendrait en paramètre la dizaine de miniatures à afficher?
Par exemple, si j'ai affiché les miniatures de 11 à 20, quand je clique sur suivant, j'appelle "gallery.php?d=3" qui signifierait "affiche moi la 3ème dizaine (photos 21 à 30) et je parcours mon dossier jusqu'à arriver à la 21ème photo et je crée les miniatures???

Mais ca ne risque pas d'etre lourd et lent???

Merci pour votre aide
Modifié par NonoF (27 Apr 2005 - 16:45)

Bonjour,
personnellement, j'ai préféré faire une "page.htm" suivante, appelée par la précédente, et reproduisant le script à l'identique, pour les 10 photos suivantes, et ainsi de suite...

Bonjour,

Finalement, j'ai opté pour la solution que j'ai présenté précédemment. J'ai deux boutons "précédent" et "suivant" qui permettent d'afficher 10 autres miniatures en modifiant le paramètre de la page à afficher "gallery.php?p=0".

Pour savoir combien il y a de pages en tout et s'il faut activer ou pas le bouton "suivant", à chaque fois que je fais appel à "gallery.php", je regarde le dossier contenant les photos pour savoir si les photos à afficher sont les dernières.

Je vais également ajouter deux boutons "précédent" et "suivant" au niveau de la photo de grande taille afin de la faire défiler. Mais pour cela, il faudra que je combine le "suivant" de la photo avec le "suivant" des miniatures, de façon à changer les miniatures quand j'affiche la photo suivante de la dernière photo d'une série (je ne sais pas si c'est très clair...).

En tout cas, en dehors du script Javascript fourni sur ce site pour la galerie photos, j'ai recours au php.

Alors je me demandais si c'était vraiment efficace, c'est-à-dire si le fait de réafficher toute la page à chaque fois que j'affiche une nouvelle photo est vraiment utile?

N'y a t'il pas une autre possibilité, en complétant le script Javascript fournit sur le site, par exemple?

Sinon, j'ai un autre problème au niveau de l'affichage des photos. En effet, jusqu'à maintenant, je dimensionne les photos "en dur" c'est-à-dire que j'impose la taille (aussi bien pour les miniatures que pour la photo grande taille). Malheureusement, les photos sont déformées. Je ne sais pas comment faire pour laisser la taille des photos "libre" dans un conteneur fixe. Je m'explique : j'ai un conteneur de taille fixe, par exemple 600*400 et des photos au format paysage ou portrait voire meme panoramique à afficher (en fait je ne connais pas par avance les tailles des photos). J'aimerais que l'affichage s'adapte au conteneur tout en respectant les proportions de la photo (par exemple un panoramique ferait 600*100, un paysage ferait 600*400, un portrait ferait 300*400). Je me suis pris la tête un petit moment la dessus mais ca ne marche pas . Je mettrais prochainement la page en ligne afin d'illustrer mon propos.

En tout cas, merci à vous tous pour votre aide précieuse.
Je suis conscient que ca fait beaucoup de questions...

Merci d'avance

Pour la taille de tes images, tu peux utiliser une fonction PHP qui récupère la taille de l'image.

Si tu veux juste tester portrait/paysage, un truc du style

if (width > height) { // paysage }
else { // portrait }

Mais tu sembles vouloir un truc plus précis donc voir 5 lignes plus haut ^^


Pour le non rechargement de la page, oui c'est possible, mais il faut que tu ais le chemin de l'image dans ton url.
Tu fais des urls du type ?page=X&photo=photos/jean_paul_et_marco.jpg
Un truc dans ce gout là. Et à partir de ça tu peux gérer l'affichage avec JavaScript en utilisant la fonction du tuto (en l'adaptant légerement, il faudra analyser les paramètres de l'url du href au lieu du href dans son ensemble.)

Bonjour,

Merci pour l'aide en ce qui concerne les proportions d'affichage.
Maintenant, les images ont affichées correctement.

En ce qui concerne le suivant de la grande photo, j'ai essayé de modifié la valeur du lien "Suivant" à chaque clic sur le bouton "Suivant" mais je n'arrive, ca ne marche qu'une seule fois.

Comment peut-on faire pour que à chaque clic sur un lien, on modifie la référence de ce lien. En clair, si mon lien "Suivant" a pour référence (href) la photo 1, comment faire pour que lorsque je clique sur le lien "Suivant", la référence (href) évolue et devient la photo 2, puis la photo 3...??
J'ai essayé d'utilisé la méthode Javascript .onclick mais elle ne semble fonctionner qu'une seule fois...

Merci d'avance.

Amicalement

Bruno

salut,
c'était en cours de réalisation, mais j'ai dû laisser tomber :
http://forum.alsacreations.com/topic.php?fid=16&tid=2988

Je m'y remettrais peut être bientôt.