11522 sujets

JavaScript, DOM et API Web HTML5

Récupérer images d'un fichier json pour diaporama

Bonjour,
Je souhaite récupérer des images d'un fichier json et afficher ces images avec un diaporama et des chevrons PREV et NEXT pour pouvoir naviguer entre les images.
Je vois pas du tout pour l'instant et je sollicite votre aide pour le code JavaScript à insérer.
Voilà le code (sans javascript encore) :

<?php
 error_reporting(0);
 $json=file_get_contents("test2.json");
?>
 <?php
 $data = json_decode($json, true);
 foreach ($data as $record) { ?>
  <h2><?php echo $record['ordre']; ?></h2>
   <img src="<?php echo $record['images']; ?>" />
   <?php
     }
   ?>

et le fichier JSON (test2.json)

[{"ordre":1,"images":"http://localhost/img1.png"},{"ordre":2,"images":"http://localhost/images/img2.png"},{"ordre":3,"images":"http://localhost/images/img3.png"}]


Une piste ? Merci
Up Smiley cligne
Je crois que toute la difficulté réside dans le fait que j'essaie de réaliser un slideshow (en JavaScript) avec une boucle en PHP (ici un foreach)...
Une idée ?
Bonjour,
woubi a écrit :
Je crois que toute la difficulté réside dans le fait que j'essaie de réaliser un slideshow (en JavaScript) avec une boucle en PHP (ici un foreach)...

C'est possible en effet ! Smiley smile
Part plutôt sur une récupération en javascript directement, e.g. avec jQuery un .getJSON() devrait satisfaire ce besoin facilement.
Merci Smiley cligne

Cependant je ne trouve pas, enfin je suis pas super à l'aise avec la doc jQuery.
J'ai ce code de slideshow en js qui fonctionne Smiley smile
Ma question c'est comment je peux remplacer les deux tableaux var images [ ]; et var ordre [ ]; de mon fichier slide.js par le fichier test2.json ?

Car je veux appeler mes images du fichier json et pas du fichier js (plus tard ce sera des données sur un fichier json sur un serveur qui changeront tous les jours, je peux pas les garder statiques sur un fichier js).

Voila la page slideshow.php (j'ai commenté tout le code qui appelle le fichier json car je trouve pas le code pour le slideshow en appelant le fichier json)

<!DOCTYPE html>
<html>
  <head>
    <title>Slideshow</title>
  </head>

  <body>
  <?php
  // error_reporting(0);
  // $json=file_get_contents("test2.json");
  ?>

    <img src="img1.jpg" alt="img1" id="slideshow">
    <br>

    <?php
    // $data = json_decode($json, true);
    // foreach ($data as $record) { ?>
       <h2><?php //echo $record['ordre']; ?></h2>
       <img src="<?php //echo $record['images']; ?>" id="slideshow" />

      <?php
    //     }
      ?>

    <div id="ordre">
      ordre 1
    </div>

    <a href="#" onclick="changeImage(-1); return false;">Previous slide</a>
    <a href="#" onclick="changeImage(1); return false;">Next slide</a>

    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->

    <script src="slide.js"></script>
  </body>
</html>


et le fichier slide.js 

var images = ["img1.jpg", "img2.jpg", "img3.jpg"];
var ordre = ["ordre1", "ordre2", "ordre3"];

var imageNumber = 0;
var imageLength = images.length - 1;

function changeImage(x) {
  imageNumber += x;

  if (imageNumber > imageLength) {
    imageNumber = 0;
  }
  if (imageNumber < 0) {
    imageNumber = imageLength;
  }

  document.getElementById("slideshow").src = images[imageNumber];
  document.getElementById("ordre").innerHTML = ordre[imageNumber];

  return false;
}


test2.json
[{"ordre":1,"images":"http://localhost/www/img1.jpg"},{"ordre":2,"images":"http://localhost/www/img2.jpg"},{"ordre":3,"images":"http://localhost/www/img3.jpg"}]


Merci
Bonjour,

En gros, je pense que tu n'as besoin que de rajouter ce bout de code là dans slide.js:
var images = [],
    ordre = [],
    imageNumber = 0,
    imageLength;

$.getJSON( "test2.json", function( data ) {
  for (img in data) {
    if (data.hasOwnProperty(img)) {
      images.push(data[img].images)
      ordre.push("ordre"+data[img].ordre)
    }
  }
})

imageLength = images.length - 1;

// ... suite du code slide.js


Ici le codepen pour voir le résultat de la boucle for : https://codepen.io/anon/pen/KmvKmg
Modifié par SolidSnake (03 May 2017 - 12:10)
Merci,
Désolé, je vois pas...
J'ai testé quelque chose comme cela 

<!DOCTYPE html>
<html>
  <head>
    <title>Slideshow</title>
  </head>
  <body>
  <?php
  error_reporting(0);
  $json=file_get_contents("test2.json");
  ?>
  <?php
  $data = json_decode($json, true);
  foreach ($data as $record) { ?>

    <?php
       }
    ?>
  <h2><?php echo $record['ordre']; ?></h2>
  <img src="<?php echo $record['images']; ?>" id="slideshow" />
    <div id="ordre">
    </div>

    <a href="#" onclick="changeImage(-1); return false;">Previous slide</a>
    <a href="#" onclick="changeImage(1); return false;">Next slide</a>
    <script src="slide.js"></script>

  </body>
</html>


slide.js

var images = [],
    ordre = [],
    imageNumber = 0,
    imageLength;

$.getJSON( "test2.json", function( data ) {
  for (images in data) {
    if (data.hasOwnProperty(images)) {
      images.push(data[images].images)
      ordre.push("ordre"+data[images].ordre)
    }
  }
})

imageLength = images.length - 1;

function changeImage(x) {
  imageNumber += x;

  if (imageNumber > imageLength) {
    imageNumber = 0;
  }
  if (imageNumber < 0) {
    imageNumber = imageLength;
  }

  document.getElementById("slideshow").src = images[imageNumber];
  document.getElementById("ordre").innerHTML = ordre[imageNumber];

  return false;
}


et test2.json

[{"ordre":1,"images":"http://localhost/www/test/msw/simplejs/img1.jpg"},{"ordre":2,"images":"http://localhost/www/test/msw/simplejs/img2.jpg"},{"ordre":3,"images":"http://localhost/www/test/msw/simplejs/img3.jpg"}]


J'ai sorti l'appel de l'image et de l'ordre de la boucle foreach car sinon j'avais les 3 images. la une seule s'affiche (la dernière) mais quand je clique sur "next slide", j'ai un src="undefined" dans firebug... Smiley decu
Modérateur
le JSON est un array, donc data est un array (et n'a donc par de properties).

Voilà qui devrait mieux fonctionner:

$.getJSON( "test2.json", function( data ) {
  for (var i=0; i < data.length; i++) {
      images.push(data[i].images)
      ordre.push("ordre"+data[i].ordre)
  }
})


(Le code ne passe jamais dans if (data.hasOwnProperty(img)) )
Modifié par kustolovic (05 May 2017 - 14:44)
Merci !
Bon j'avoue je suis un peu perdu... Ce code ne fonctionne pas mieux. J'ai bien une image qui s'affiche (la dernière images du fichiers json et non la première comme je voudrais) et quand on clique sur next ou preview j'ai :

<img id="slideshow" src="undefined">
<div id="ordre">undefined</div>

dans la console de firebug !
Modérateur
Oh oui, getJSON est asynchrone, il faut déplacer
"imageLength = images.length - 1;" dans getJSON après le for, sinon imageLength vaudra -1 Smiley ohwell
Modifié par kustolovic (05 May 2017 - 16:53)
Merci !
Toujours pas... par contre je n'ai plus de "undefined" dans firebug mais c'est toujours la même image qui reste (donc pas de diaporama).
kustolovic a écrit :
le JSON est un array, donc data est un array (et n'a donc par de properties).
...
(Le code ne passe jamais dans if (data.hasOwnProperty(img)) )

Ah effectivement, j'aurais dû le mettre dans le callback !

Par contre :
kustolovic a écrit :
le JSON est un array, donc data est un array (et n'a donc par de properties).
...
(Le code ne passe jamais dans if (data.hasOwnProperty(img)) )

Là, je ne suis pas d'accord, même pour un array, il doit rentrer dans le if (même si sur le principe ce test n'est ici pas obligatoire).
Sujet clos
Aller à