Afficher des image depuis la base de donnée php a mon album coder en javascrit [Résolu]

Signaler
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021
-
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021
-
bonsoir j'ai eu a faire un System d'album avec javascript
la je sais pas comment faire pour introduire mon code php afin d'avoir les images de ma base de donnée dans album


<script>
    		window.onload=function(){
    			nbr=20;
    			cont=document.getElementById("container");   			
    			images=["images/romarin.jpg","images/chat.jpg","images/zn.jpg","images/chien.jpg","images/ir.jpg"];
    			im=0;
    			ang=[];
    		    init();
    	    }
    		function init(){
    			for(i=0;i<nbr;i++){
    				try{ 
    				    cont.removeChild(document.getElementById(i));
    			    }
    			    catch(e){
    				    true;
    			    }
    			}
    			for(i=0;i<nbr;i++){
    				ang[i]=-i*10-90;
    			    div=document.createElement("div");
    			    div.style.width=(cont.clientWidth/nbr)+"px";
    			    div.style.height=cont.clientHeight+"px";
    			    div.className="maClasse";
    			    div.setAttribute("id",i);
    			    div.style.visibiliby="hidden";
    			    div.style.backgroundImage="url('"+images[im]+"')";
    			    div.style.backgroundSize=cont.clientWidth+"px auto";
    			    div.style.backgroundPosition=(i*100/(nbr-1))+"% 50%";
    			    div.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";
    			    cont.appendChild(div);
    			}
    			animer();    
    		}
    		function animer(){
    		    t=setTimeout("animer()",10);    		    
    		    for(i=0;i<nbr;i++){
    		    	ob=document.getElementById(i);
    		    	ob.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";   		    	
    		    	if(ang[i]>-90)
    		    		   ob.style.visibility="visible";
    		    	if (ang[i]<0)
    		    		 ang[i]+=2;
    		        else 
    		    		  ang[i]=0; 
    		    	if(ang[nbr-1]==0){
    		    		im+=1;
    		    		if(im>images.length-1)
    		    				im=0;
    		    			clearTimeout(t);
    		    			init();
    		        } 
    		    }	
    		} 

   	
    	</script>

 <?php  

$requete = $bdd->query( "SELECT *
 FROM articles
  join   images
where images.idarticle =  articles.id  and categories = 'immobilier' group by idarticle " );


  while($resultat =$requete->fetch())

{?>
<img src="<?php echo $resultat['image']?>" width="100" height="100">  <?php }?>

8 réponses

Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557
Bonjour,
Tu stockes tes images dans un array PHP
Puis, dans le code js, tu fais un json_encode de la variable pour pouvoir les récupérer dans le javascript


Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021
>
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021

c'est fait et sa affiche ca Failed to load resource: the server responded with a status of 403 (Forbidden) ensuite ca GET http://localhost/[%22upload/téléchargemenkt.jpg%22,%22upload/AAHN2070.JPG%22,%22upload/RHQM1944.JPG%22,%22upload/AHFO0316.JPG%22,%22upload/RXVZ3023.JPG%22,%22upload/AAUJ2009.JPG%22,%22upload/1F42733A-41A5-481C-AFB1-5CA9AD2E2F84.jpeg%22,%22upload/EF8796BE-837B-47B9-AACE-09D0CFF08597.jpeg%22,%22upload/BLNI6091.JPG%22] 403 (Forbidden)
sa affiche les extenson dans la console mais rien sur la page
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557 >
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021

Visiblement le lien vers les images n'est pas bon...
Tu es sûr du chemin ?
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021
>
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021

oui ya "%22" qui s'ajoute a chaque chemin c'est qui n'est pas normal
et aussi de devraient etre chancune dans des " "
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021
>
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021

enfaîte les chemin devraient s'afficher comme ça pour que sa marche "upload/téléchargemenkt.jpg","upload/AAHN2070.JPG","upload/RHQM1944.JPG,upload/AHFO0316.JPG","upload/RXVZ3023.JPG","upload/AAUJ2009.JPG","upload/1F42733A-41A5-481C-AFB1-5CA9AD2E2F84.jpeg","upload/EF8796BE-837B-47B9-AACE-09D0CFF08597.jpeg,upload/BLNI6091.JPG"
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021
>
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021

et surtout les "%22" je sais pas vraiment d'ou sa sort peut-être c'est qui empêche l'affichage des photos
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557
Tu peux retirer les quotes à la ligne
images= '<?php echo $json; ?>';

Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021

finalement les "%22" ont disparuent
mais le problème persiste
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557
Peux tu nous faire un
print_r($json);

et nous montrer ce que ça te retourne ?

Egalement, ajouter un console.log dans ton js
avant ton script
var mesimages = <?php echo $json; ?>;
console.log('mesimages',mesimages);
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557 >
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021

Typiquement... j'ai testé comme ceci
<?php

  
$arr = ['upload/image1.jpeg','upload/image2.jpeg','upload/image3.jpeg'];

$json = json_encode($arr);
 ?>
    <script>
   var mesimages = <?php echo $json; ?>;
console.log('mesimages',mesimages);
   </script>

Et la variable javascript contient bien mes images au bon format ....
Je suppose donc que tu as raté quelque chose lors de la création de ta variable $json ...
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021
>
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021

je crois bien
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021
>
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021



voila j'ai fais comme vous l'avait recommandé
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557 >
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021

Dis voir .. tu as utilisé quel code pour générer la variable $json ??
Celui que je t'avais donné ??


Et juste pour les tests... pourrais tu juste essayer avec les images qui marchaient à l'origine dans le script ?
En faisant, dans ton PHP .. juste ça :
$arr = ["images/romarin.jpg","images/chat.jpg","images/zn.jpg","images/chien.jpg","images/ir.jpg"];
$json = json_encode($arr);
print_r($json);
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021


la c'est quand je met les chemin dans la variable $json coté php
 $arr= ["images/romarin.jpg","images/chat.jpg","images/zn.jpg","images/chien.jpg","images/ir.jpg"];




puis la c'est quand je met les chemins directement dans la variable images du javascript
  images= ["images/romarin.jpg","images/chat.jpg","images/zn.jpg","images/chien.jpg","images/ir.jpg"];

la sa fonction normalemnt
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557
Le console.log donne bien la même chose....
As tu bien mis la variable au bon endroit dans ton code js ?

Pourrais tu nous partage ton code complet ( HTML + JS ) ?
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021

voila c'est le html plus js ainsi

 <!DOCTYPE html>
 <html>
 <head>
   <title></title>
  
 <style>
        #container{
          width: 1000px;
          height: 500px;
          margin: 50px auto;
          }
          .maClasse{
            display: inline-block;
            vertical-align:top;
          }
      </style>

    </head>
    <body>
      <div id="container">
      </div>
     <script>
      var mesimages = <?php echo $json; ?>;
console.log('mesimages',mesimages);


        window.onload=function(){
          nbr=20;
          cont=document.getElementById("container");        
          images= [<?=$json?>];
  
   
          im=0;
          ang=[];
            init();
          }
        function init(){
          for(i=0;i<nbr;i++){
            try{ 
                cont.removeChild(document.getElementById(i));
              }
              catch(e){
                true;
              }
          }
          for(i=0;i<nbr;i++){
            ang[i]=-i*10-90;
              div=document.createElement("div");
              div.style.width=(cont.clientWidth/nbr)+"px";
              div.style.height=cont.clientHeight+"px";
              div.className="maClasse";
              div.setAttribute("id",i);
              div.style.visibiliby="hidden";
              div.style.backgroundImage="url('"+images[im]+"')";
              div.style.backgroundSize=cont.clientWidth+"px auto";
              div.style.backgroundPosition=(i*100/(nbr-1))+"% 50%";
              div.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";
              cont.appendChild(div);
          }
          animer();    
        }
        function animer(){
            t=setTimeout("animer()",10);            
            for(i=0;i<nbr;i++){
              ob=document.getElementById(i);
              ob.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";            
              if(ang[i]>-90)
                   ob.style.visibility="visible";
              if (ang[i]<0)
                 ang[i]+=2;
                else 
                  ang[i]=0; 
              if(ang[nbr-1]==0){
                im+=1;
                if(im>images.length-1)
                    im=0;
                  clearTimeout(t);
                  init();
                } 
            } 
        } 

    
      </script>
   
  
  

</body>
</html>
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557
Ton code ne correspond pas à ce que je t'ai donné
 images= [<?=$json?>];

A remplacer par
 images = <?php echo $json; ?>;
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021
>
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021

c'est noter mais ya toujours le problème

aussi j'ai remarquer que ya des barres inverse qui s'ajoute dans les chemins

sa c'est le resultat du print_r($json);
["images\/romarin.jpg","images\/chat.jpg","images\/zn.jpg","images\/chien.jpg","images\/ir.jpg"]
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557 >
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021

ça c'est normal.
Et donc, que t'affiche la console ?
Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021

c'est ça sa m'affiche en répétition GET http://localhost/undefined 404 (Not Found)
Messages postés
32944
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 juin 2021
3 557
Il faut déclarer tes variables en dehors des fonctions si tu veux qu'elles aient une portée "globale"

Code corrigé et fonctionnel
 <?php
 
 $arr = ["images/1.jpg","images/2.png","images/3.png","images/4.jpg"];
$json = json_encode($arr);
print_r($json);
 
 ?>
 
 
 <!DOCTYPE html>
 <html>
 <head>
   <title></title>
  
 <style>
        #container{
          width: 1000px;
          height: 500px;
          margin: 50px auto;
          }
          .maClasse{
            display: inline-block;
            vertical-align:top;
          }
      </style>

    </head>
    <body>
      <div id="container">
      </div>
     <script>
      var mesimages = <?php echo $json; ?>;
      console.log('mesimages',mesimages);

      var nbr=20;
      var cont=document.getElementById("container");        
      var images= mesimages;
      var im=0;
      var ang=[];
      
      window.onload=function(){
         init();
      }
        function init(){
          for(i=0;i<nbr;i++){
            try{ 
                cont.removeChild(document.getElementById(i));
              }
              catch(e){
                true;
              }
          }
          for(i=0;i<nbr;i++){
            ang[i]=-i*10-90;
            div=document.createElement("div");
            div.style.width=(cont.clientWidth/nbr)+"px";
            div.style.height=cont.clientHeight+"px";
            div.className="maClasse";
            div.setAttribute("id",i);
            div.style.visibiliby="hidden";
            div.style.backgroundImage="url('"+images[im]+"')";
            div.style.backgroundSize=cont.clientWidth+"px auto";
            div.style.backgroundPosition=(i*100/(nbr-1))+"% 50%";
            div.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";
            cont.appendChild(div);
          }
          animer();    
        }
        function animer(){
            t=setTimeout("animer()",10);            
            for(i=0;i<nbr;i++){
              ob=document.getElementById(i);
              ob.style.transform="perspective(1000px) rotateY("+ang[i]+"deg)";            
              if(ang[i]>-90)
                   ob.style.visibility="visible";
              if (ang[i]<0)
                 ang[i]+=2;
                else 
                  ang[i]=0; 
              if(ang[nbr-1]==0){
                im+=1;
                if(im>images.length-1)
                    im=0;
                  clearTimeout(t);
                  init();
                } 
            } 
        } 

    
      </script>
   
  
  

</body>
</html>



Messages postés
95
Date d'inscription
vendredi 12 juin 2020
Statut
Membre
Dernière intervention
12 mai 2021

merci beaucoup tous marche maintenant