Partage
  • Partager sur Facebook
  • Partager sur Twitter

Passer à l'image suivante dans une galerie

    19 janvier 2019 à 12:40:15

    Bonjour,

    Tous mes fichiers images sont stockés dans un dossier et sont de la forme :

    $img = $time.$imgname;
    

    avec

    $time=10000000000-time();

    et

    function genererChaineAleatoire($longueur = 10);
    {
     $caracteres = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
     $longueurMax = strlen($caracteres);
     $chaineAleatoire = '';
     for ($i = 0; $i < $longueur; $i++)
     {
     $chaineAleatoire .= $caracteres[rand(0, $longueurMax - 1)];
     }
     return $chaineAleatoire;
    }
    
    $imgname=genererChaineAleatoire(50); //appelle la fonction ci-dessus

    J'ai une galerie sur laquelle est affiché en grand une certaine image (que l'on sélectionne parmi les miniature en dessous)

    Tout marche correctement mais j'aimerais ajouter des flèches à droite et à gauche de l'image en grand pour passer à l'image suivante ou précédente dans le dossier sachant que les images sont triées par date d'ajout à la galerie.

    C'est pour cette raison que j'aimerais savoir comment faire un script PHP qui irait se placer dans le dossier à l'image affichée en grand que j'ai stocké dans $_SESSION['photo'] ,qui passe à l'image suivante et stocke son nom dans $_SESSION['photo'] puis retourne sur la page de la galerie dans laquelle serait affichée la nouvelle image.

    Merci de votre aide

    NB : Pour savoir si l'utilisateur veut l'image suivante ou précédente j'ai une variable $_SESSION['+-'] qui vaut soit 's' pour photo suivante soit 'p' pour photo précédente.





    -
    Edité par AntoninLITSCHGY 19 janvier 2019 à 12:41:41

    • Partager sur Facebook
    • Partager sur Twitter
      19 janvier 2019 à 14:31:28

      En php, le code est envoyé du serveur au navigateur, donc si tu mets des fleches, la page va a chaque fois se rafraichir apres chaque clic, pour une galerie c’est mieux de rester sur la meme page et utiliser javascript, dont le code s’execute côté navigateur.

      Le principe c’est de précharger tes images, les mettre dans un array deja dans l’ordre que tu veux, puis tu rajoutes +1 ou -1 a une variable qui sert de compteur, et tu utilises ce chiffre pour connaitre l’index de l’image dans l’array.

      Par exemple en cliquant à droite, compteur++, puis img.src = tab[compteur]. Tu peux utiliser modulo ou un simple if else quand tu depasses la longueur du tableau pour revenir a l’index 0, et pareil de 0 pour aller au dernier index.

      Pour mettre tes images dans un array, voici un exemple :

      https://stackoverflow.com/questions/3646036/javascript-preloading-images

      arguments designe les parametres dans une fonction maFonction(truc, machin), truc et machin sont les parametres.

      Le mieux c’est de faire l’appel aux images via une simple fonction ajax, une page php speciale renvoit les images au javascript avec un echo, et tu mets ces images dans un array js, comme ca pas de confusion entre les langages.

      Pour un simple exemple ajax avec jquery, voila un ancien post auquel j’avais repondu : https://openclassrooms.com/forum/sujet/phrases-defilantes-depuis-base-de-donnees-updatee

      • Partager sur Facebook
      • Partager sur Twitter
        19 janvier 2019 à 19:13:28

        Merci pour ta réponse

        J'ai compris comment faire mais je n'ai jamais écrit une seule ligne en JS

        Aurait-tu un exemple de script qui ferait ça (avec plein de commentaires :))

        PS : comment on fait pour passer le sujet sur le forum JS ?

        • Partager sur Facebook
        • Partager sur Twitter
          19 janvier 2019 à 22:03:39

          Fais etape par etape et ouvre un sujet sur le forum js si tu as un probleme.

          Je t’ai donné les liens : un simple appel ajax vers une page php, tu renvoies un echo “ok” en php pour tester si tu veux.

          Puis dans la page php, tu vas chercher les liens url dans ta base de donnees, qui pointent surement vers les images sur ton ftp, tu les mets dans un tableau, avec echo json encode cette fois, pas echo “ok”, comme expliqué dans mon ancien post.

          Puis de retour en js, tu suis le code du lien stackoverflow pour precharger tes images. Il ne reste plus qu’à appeler un index du tableau et changer le .src de la grande image. 

          • Partager sur Facebook
          • Partager sur Twitter
            20 janvier 2019 à 17:11:34

            Bon je vais faire ce que tu as dit et recréer un sujet sur le forum JS

            En attendant j'ai réussi à faire mon script en PHP et il marche très bien

            <?php
            session_start();
            
            $_SESSION['+-'] = $_GET['i']; // on stocke l'iformation de si l'utilisateur veut passer à la page suivante ou précédente dans la session
            
            //Page pour passer à la photo suivante
            				if ($_SESSION['+-'] == 's') {
            
            
            				$trouve = false;
            				$photoaffichee = $_SESSION['photo'];
            
            					
            				foreach (glob('../galerie/*.jpg') as $f) {
            					
            					
            					$photocheck = substr($f, 11);
            					
            					if ($trouve == true) {
            								$photocherchee = $photocheck;
            								$trouve = false;
            							}
            
            					if ($photocheck == $photoaffichee) {   //ce système avec 2 conditions pour avoir dans $photocherchee la photo d'après la photo affichee
            								$trouve = true;
            						
            						}	
            
            				}
            
            				$_SESSION['photo'] = $photocherchee;
            
             					}
            
            //Page pour passer à la photo précédente
            
            if ($_SESSION['+-'] == 'p') {
            
            
            				$photoaffichee = $_SESSION['photo'];
            				$photocheck = '';
            					
            				foreach (glob('../galerie/*.jpg') as $f) {
            					
            					$photocheckpr = $photocheck; //on stocke la photo qu'on avait check au tour d'avant dans $photocheckpr pour savoir quelle est la photo juste avant celle qu'on vérifie qui sera celle à afficher
            					$photocheck = substr($f, 11);
            					
            					if ($photocheck == $photoaffichee) {
            								$photocherchee = $photocheckpr;
            
            						}
            
            				}
            
            				$_SESSION['photo'] = $photocherchee;
             				}
            
            
            
            header('Location: ../');
            exit();
            ?>



            • Partager sur Facebook
            • Partager sur Twitter

            Passer à l'image suivante dans une galerie

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown