galerie image automatiqu

jibb
Invité n'ayant pas de compte PHPfrance

14 juil. 2007, 23:19

bonjour,

connaissez vous un script ou un tuto qui me permet de réaliser une visionneuse d image automatique ( du genre de celle de hotmail)?

merci beaucoup

jibb
Invité n'ayant pas de compte PHPfrance

15 juil. 2007, 15:30

Salut,

j'ai trouvé ce script sur le net

Code : Tout sélectionner

<html> <body> <script language=javascript> var bauto = 0; var dossier=""; var numero = 1; function objet() { this.length = objet.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i] } [b]var nom = new objet ("imaga.gif", "imagb.gif", "imagc.gif");[/b] function suivante() { numero += 1; if (numero == nom.length + 1) numero = 1; document.image.src = dossier+nom[numero]; } function precedente() { numero -= 1; if (numero == 0) numero = nom.length; document.image.src = dossier+nom[numero]; } function changer() { numero += 1; if (numero == nom.length + 1) numero = 1; document.image.src = dossier+nom[numero]; roll=setTimeout("changer()", 1500); } function initial() { window.clearTimeout(roll); document.image.src = dossier+nom[numero]; } function auto() { if (bauto == 0) { bauto =1; changer(); document.vision.automat.value=" Lect/Stop "; } else { bauto =0; initial(); document.vision.automat.value=" Lect/Auto "; } } </script> <form name="vision"> <div align="center"> <input type="button" name="precedent" value="Précédente" onClick="precedente();"> &nbsp;&nbsp;&nbsp; <input type="button" name="suivant" value=" Suivante " onClick="suivante();"> &nbsp;&nbsp;&nbsp; <input type="button" name="automat" value=" Lect/Auto "onClick="auto();"> </div> </form> <div align="center">&nbsp;<img src="imaga.gif" width="200" height="194" name="image"></div> </body> </html>
Ce script fonctionne très bien, mais je dois le modifier. En effet, au niveau de la ligne en gras, je souhaiterai qu'il y ait la liste de toutes les photos contenu dans un repertoire...Comment faire ceci en js?

Merci[/b]

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

15 juil. 2007, 15:41

Bonjour,

En javascript, tu ne pourras pas (ou très difficilement).
Le + simple est de faire ça avec du PHP. Les 2 fonctions à utiliser sont glob() et foreach()

L'exemple de la doc PHP pour la fonction glob te donne tout ce dont tu as besoin, tu as juste à l'adapter pour qu'il construise le tableau javascript. ;)
http://fr.php.net/glob
Quand tout le reste a échoué, lisez le mode d'emploi...

jibb
Invité n'ayant pas de compte PHPfrance

15 juil. 2007, 15:56

Ok merci, je regarde ça. J'avais deja anticipé la question et j'essaye de construire un tableau javascript grace au listage de mon repertoire fait en php...

jibb
Invité n'ayant pas de compte PHPfrance

18 juil. 2007, 19:45

Salut,

Alors j'ai réussi a initialiser mon tableau javascript en listant le contenu de mon répertoire.
J'ai pu alors mettre en place la visionneuse automatique, la marche avant et marche arriere.

Maintenant,j'ai un nouveau souci et je voudrais vous en parler.

A cause de la taille des pages sur le site, je dois faire ma visionneuse dans un div avec certaines dimensions.

Avant de vous expliquer mon souci, je vous décrit rapidement la page.
On a un div d'une largeur de 700 px, d'une hauteur de 500px.
J'ai 3 zone dans ce div.
  • un div tout a droite de 130 de largeur et 480 de hauteur dans lequel je place une vingtaine de miniatures
  • un div centrale qui afiche l'image choisi parmis les miniatures
  • un div bas qui contient du texte propre à chaque photo
Pour le moment, si on clique sur une miniature, on la vois dans le div central. Si on appuie sur le bouton "play", on visualise toutes les photos les unes apres les autres.... Donc tout se passe bien.

Maintenant, je voudrais aller plus loin dans mon script.

Si par exemple, le dossier contient non pas 20 photos mais 80, vu que j'en affiche 20 dans le div latéral, j'ai fait un systeme qui me permet d'en mettre 20 par page, d'afficher des liens "page suivante", "page précédente".(jusque là pas de souci).
Ma fonction javascript (qui affiche automatiquement les photo) prend en argument global, un numéro qui est propre a chaque photo.
En cliquant sur un lien suivant, j'actualise cette variable global a la bonne valeur. DE cette manière, si je suis sur la 1ere page que je lance ma visionneuse automatique et que je decide de passer à la 2eme page(alors que ma visionneuse affiche la 3eme photo), ma visionneuse affichera non pas la 4eme photo mais la 21eme...Il n'y a donc pas de souci....

En revanche, imaginons que je suis sur la 1ere page, je lance ma visionneuse, elle affiche les 20 1ere photos, puis les 20 suivantes, puis les 20 d'apres, et ce jusqu'à la derniere puis elle reprends la 1ere etc... J'ai un souci car si j'active la visionneuse dans ma 1ere page et qu'elle passe à la 21eme, mon div latéral affichera toujours les 20 premieres...Je cherche donc un moyen pour que mon div de droite s'actualise en fonction de la photo affiché par la visionneuse.

Avez vous une idée?

Merci