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

Résolu/Fermé

ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021 - 12 mars 2021 à 17:26
ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021 - 18 mars 2021 à 22:36

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 }?>

A voir également:

Afficher des image depuis la base de donnée php a mon album coder en javascrit
Album photo partagé - Guide
Code ascii de a - Guide
Formules excel de base - Guide
Album partagé google - Guide
Image iso - Guide

8 réponses

Réponse 1 / 8

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
12 mars 2021 à 17:31

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

ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
12 mars 2021 à 18:11

la jessaye de faire l'arrays mais j'ai recontre quelque soucis

Fatal error: Uncaught Error: Call to undefined function mysql_fetch_array() in C:\xampp\htdocs\immobilier.php:23 Stack trace: #0 {main} thrown in C:\xampp\htdocs\immobilier.php on line 23

<?php try{
$bdd =new PDO('mysql:host=localhost;
 dbname=espace_membre; charset=utf8', 'root', '');
// Activation des erreurs PDO
 $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// mode de fetch par défaut : FETCH_ASSOC / FETCH_OBJ / FETCH_BOTH
 $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    die('Erreur : ' . $e->getMessage());
}
?>

    <?php  

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


  while($resultat = mysql_fetch_array($requete))

{?>
 
<?php echo $resultat['image'];
   
  ?>
 
   
  
   <?php
  }?>

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703 > ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
Modifié le 12 mars 2021 à 18:14

Vu que tu utilises pdo regarde la fonction fetchall

ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021 > jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024
Modifié le 12 mars 2021 à 19:23

j'ai pu faire l'array
et le json_encode<gras>
<?php $requete = $bdd->query( "SELECT * FROM articles join images where images.idarticle = articles.id group by idarticle " ); $resultat=$requete->fetchAll(PDO::FETCH_ASSOC); foreach($resultat as $row){ $images = htmlentities($row['image']);?> <Br><?php $ir = "$images"; $json= json_encode($ir); } ?></br>

<?php $ir = "$images"; $json= json_encode($ir); } ?></br>

<gras>
mais j'arrive pas a introduire dans ce code ci
dans la variable " images "

 <div id="container">
      </div>
      <script>
        window.onload=function(){
          nbr=20;
          cont=document.getElementById("container");        
          images= ['var ir'] 
  
   
          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>

Essaye

images= '<?php echo $json; ?>';

dans le code js?

Réponse 2 / 8

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
14 mars 2021 à 19:06

Tu peux retirer les quotes à la ligne

images= '<?php echo $json; ?>';

Réponse 3 / 8

ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
Modifié le 14 mars 2021 à 19:50

finalement les "%22" ont disparuent
mais le problème persiste

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
Modifié le 14 mars 2021 à 19:53

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);

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703 > jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024
14 mars 2021 à 19:57

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 ...

je crois bien

voila j'ai fais comme vous l'avait recommandé

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);

Réponse 4 / 8

ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
Modifié le 14 mars 2021 à 20:40

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

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
14 mars 2021 à 21:17

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 ) ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
Modifié le 15 mars 2021 à 09:21

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>

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
15 mars 2021 à 14:24

Ton code ne correspond pas à ce que je t'ai donné

 images= [<?=$json?>];

A remplacer par

 images = <?php echo $json; ?>;

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"]

ça c'est normal.
Et donc, que t'affiche la console ?

Réponse 6 / 8

ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
Modifié le 16 mars 2021 à 14:15

c'est ça sa m'affiche en répétition GET http://localhost/undefined 404 (Not Found)

Réponse 7 / 8

jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
16 mars 2021 à 21:31

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>

Réponse 8 / 8

ir_1997 Messages postés 97 Date d'inscription vendredi 12 juin 2020 Statut Membre Dernière intervention 13 juin 2021
18 mars 2021 à 22:36

merci beaucoup tous marche maintenant

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

code couleur associé a une image

Résolution d'une image 500 pixels largeur

Nettoyer une base de données avec une liste