Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] Diaporama

Lire des images contenues dans un dossier

Sujet résolu
bermanarber
24 mai 2007 à 0:20:58

Bonjour à tous.

Je souhaite créer un diaporama de logos de partenaires, pour le site de mon asso.

J'ai déjà un script qui me permet d'afficher les logos, mais il faut que je nomme les fichiers un par un...

J'aimerai plutôt indiquer qu'il doit aller chercher les images dans un dossier...
Mais voila, je ne connais pas grand chose en javascript (j'apprends le php sur SDZ...)

Voila mon script :
<!--
var timeDelay = 3;
var Pix = new Array
("images/logospart/1178631728.jpg"
,"images/logospart/1178750744.jpg"
,"images/logospart/1178745694.jpg"
,"images/logospart/1178747632.jpg"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//  End -->
</script>
<body OnLoad="startPix()">
<img name="ChangingPix" src="images/logospart/1178631728.jpg">


Si quelqu'un pouvait m'aider... ce serait vraiment sympa ! :p
(la manifestation approche, et les partenaires vont gu...ler !!) o_O
  • Partager sur Facebook
  • Partager sur Twitter
mansuetus
24 mai 2007 à 3:21:08

Je dis pas non, je demande combien :)

En un mot, c'est pas possible, ce que tu veux, en javascript. (un programme ne peut pas lister les fichiers sur un serveur).

DONC :
1. ça se fait en PHP (relou)
ou
2. ça se fait en flash (cher)
ou
3. tu renommes tes fichiers à la main ! je suppose que tu n'as pas plus de 30 partenaires... t'en as pour autant de temps que celui que tu as pris pour demander ici :)
  • Partager sur Facebook
  • Partager sur Twitter
Thibdumont
24 mai 2007 à 9:35:43

Il y a une ou deux semaines, j'avais fais un diaporama pour une personne à cette adresse :
http://www.siteduzero.com/forum-83-146164-p1-comment-creer-un-diaporama.html

Il va chercher les images dans le répertoire "images" et on peut ensuite les faire défiler manuellement ou le faire automatique.
  • Partager sur Facebook
  • Partager sur Twitter
Akis
24 mai 2007 à 11:41:44

Au lieu de lui fournir les images directement, tu remplaces cette portion de code JS par du code PHP qui va être se charger de récupérer les fichiers. Tu places cela dans un tableau JS et ainsi tu pourras facilement parcourir le tout.

En gros, ça donnerait quelque chose de ce style :

<!--
var timeDelay = 3;
var Pix = new Array();

<?php
//Portion de code php qui va parcourir et récuperer les images
$repertoire = "images/logospart/";

$dir = opendir($repertoire);
$nbIm = 0; //Compteur d'image permettant de les ajouter dans le tableau JS
while($im = readdir($dir)) {
      if($fim != ".." && $im  != ".") {
            // Ajout de l'image dans le tableau JS (Bien faire un echo !)
            echo "Pix[$nbIm] = '$repertoire.$fichier';"
            $nbIm++;
      }
}
//Toujours tenter de fermer un dossier après une ouverture (même si l'ouverture a manqué)
closedir($dir);
?>

var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//  End -->
</script>
<body OnLoad="startPix()">
<img name="ChangingPix" src="images/logospart/1178631728.jpg">


Il se peut qu'il y a quelques petites erreurs :-/
Ca fait un petit temps que je n'ai plus touché à tout ça...
  • Partager sur Facebook
  • Partager sur Twitter
bermanarber
25 mai 2007 à 0:46:44

Saut à tous, et merci Akis !
C'est exactement ce que je cherchais !

Bon... ca me renvoit une erreur à la ligne 22 ($nbIm++;)
Pour essayer de régler le problème, j'ai apporté des corrections dans le script que tu as posté, mais je ne suis pas persuadé d'avoir bien fait... :honte:

<!--
var timeDelay = 3;
var Pix = new Array(
<?php
//Portion de code php qui va parcourir et récuperer les images
$repertoire = "images/logospart/";

$dir = opendir($repertoire);
$nbIm = 0; //Compteur d'image permettant de les ajouter dans le tableau JS
while($im = readdir($dir)) {
      if($im != ".." && $im  != ".") {
            // Ajout de l'image dans le tableau JS (Bien faire un echo !)
            echo "Pix[$nbIm] = '$repertoire.$fichier';"
            $nbIm++;
      }
}
//Toujours tenter de fermer un dossier après une ouverture (même si l'ouverture a manqué)
closedir($dir);
?>
);


Tout d'abord, j'ai déplacé la parenthèse fermante de "var Pix= new array(" pour la placer après le code php.

Ensuite, j'ai corrigé la ligne : if($fim != ".." && $im != ".") par if($im != ".." && $im != ".").
D'ailleurs, je ne comprends pas bien cette ligne... que veulent dire les ".." et "." dans ce cas...

Merci encore pour ton coup de pouce ! :p
  • Partager sur Facebook
  • Partager sur Twitter
Akis
26 mai 2007 à 11:16:17

Non non, ne déplace pas la parenthèse, ça ne sert à rien ^^

L'erreur que tu as, c'est une erreur JS ou php ?

Pour le . et .., c'est parce que quand tu lis le contenu d'un dossier, il te lit également ces 2 "raccourcis" qui servent à aller voyager dans l'arborescence, et cela nous intéresse pas :)

//edit : Bien vu pour la condition où il y avait une légère erreur de frappe ^^

Pour l'erreur que tu as, elle est là : echo "Pix[$nbIm] = '$repertoire.$fichier';"

Le Point virgule est mal placé :p
  • Partager sur Facebook
  • Partager sur Twitter
bermanarber
26 mai 2007 à 14:08:46

Bonjour Akis !
Merci pour le coup de main !
L'erreur était bien là..., mais le point virgule n'était pas mal placé... il en manquait un :p (enfin je crois !).
echo "Pix[$nbIm] = '$repertoire.$fichier';";

Malheureusement, un nouveau problème se pose :
Maintenant, le script tourne (c'est à dire que toutes les 3 secondes, il va chercher une info) mais aucune image ne s'affiche, à part la première qui se trouve dans :
<body OnLoad="startPix()">
<img name="ChangingPix" src="images/logospart/1178631728.jpg">

J'ai beau fouiller... je ne vois pas ce qui se passe...
Décidément... :(
  • Partager sur Facebook
  • Partager sur Twitter
Akis
26 mai 2007 à 14:31:59

le code html généré par le code php est correct?
  • Partager sur Facebook
  • Partager sur Twitter
bermanarber
26 mai 2007 à 14:39:51

Ben pas franchement... mais je ne vois pas :honte:

Voici le code source de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<SCRIPT LANGUAGE="JavaScript">

<!--
var timeDelay = 3;
var Pix = new Array();
Pix[0] = 'images/logospart/.';Pix[1] = 'images/logospart/.';Pix[2] = 'images/logospart/.';Pix[3] = 'images/logospart/.';Pix[4] = 'images/logospart/.';Pix[5] = 'images/logospart/.';Pix[6] = 'images/logospart/.';Pix[7] = 'images/logospart/.';Pix[8] = 'images/logospart/.';Pix[9] = 'images/logospart/.';Pix[10] = 'images/logospart/.';Pix[11] = 'images/logospart/.';Pix[12] = 'images/logospart/.';Pix[13] = 'images/logospart/.';var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//  End -->
</script>
<style type="text/css">
<!--
body {
        background-color: #000000;
}
-->
</style><body OnLoad="startPix()">
<img name="ChangingPix" src="images/logospart/1178631728.jpg">
</body>
</html>
  • Partager sur Facebook
  • Partager sur Twitter
Akis
26 mai 2007 à 15:07:05

mdr j'ai capté :p

Un moment j'utilise $im, un autre $fichier, bref voila l'erreur ^^ (t'aurais du le voir nonmé :p)

echo "Pix[$nbIm] = '" . $repertoire.$im . "';";

  • Partager sur Facebook
  • Partager sur Twitter
bermanarber
26 mai 2007 à 15:24:53

Ben, il me semble avoir fait l'essai, sans résultat !
(mais je vois que tu as ajouté " . et . " dans la ligne, ceci expliquant peut-être cela :honte: )

En tous cas, ça fonctionne à merveille !

Je colle ici le script final pour les zéros que ça intéresse !
(Hem... Merci beaucoup Akis !)

<SCRIPT LANGUAGE="JavaScript">

<!--
var timeDelay = 3;
var Pix = new Array();
<?php
//Portion de code php qui va parcourir et récuperer les images
$repertoire = "images/logospart/";

$dir = opendir($repertoire);
$nbIm = 0; //Compteur d'image permettant de les ajouter dans le tableau JS
while($im = readdir($dir)) {
      if($im != ".." && $im  != ".") {
            // Ajout de l'image dans le tableau JS (Bien faire un echo !)
            echo "Pix[$nbIm] = '" . $repertoire.$im . "';";
            $nbIm++;
      }
}
//Toujours tenter de fermer un dossier après une ouverture (même si l'ouverture a manqué)
closedir($dir);
?>
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//  End -->
</script>
<style type="text/css">
<!--
body {
        background-color: #000000;
}
-->
</style><body OnLoad="startPix()">
<img name="ChangingPix" src="images/logospart/1178631728.jpg">
</body>
</html>
  • Partager sur Facebook
  • Partager sur Twitter
Akis
26 mai 2007 à 17:50:31

De rien, au plaisir d'avoir pu aider :)
  • Partager sur Facebook
  • Partager sur Twitter
BenjaminRotrou
28 octobre 2024 à 22:00:09

Bonjour, 

Merci pour le script mais je n'arrive pas à cibler mon dossier :

$repertoire = "images/logospart/";

Je suis sur Mac avec un dossier Documents/TESTIMAGES

  • Partager sur Facebook
  • Partager sur Twitter
AbcAbc6
28 octobre 2024 à 22:08:26

@BenjaminRotrou Bonsoir, merci de ne pas déterrer d'ancien sujet résolu pour une nouvelle question qui n'a rien à voir avec le problème d'origine. C'est un sujet par problématique.

Créer votre propre sujet en décrivant votre problématique ainsi que le code que vous avez écrit, insérer sur le forum à l'aide du bouton code </> de la barre d'outil.

Je ferme ce déterrage.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Liens conseillés

  • Partager sur Facebook
  • Partager sur Twitter