Afficher des image depuis la base de donnée php a mon album coder en javascrit
Résolu
ir_1997 Messages postés 97 Date d'inscription Statut Membre Dernière intervention -
ir_1997 Messages postés 97 Date d'inscription Statut Membre Dernière intervention - 18 mars 2021 à 22:36
ir_1997 Messages postés 97 Date d'inscription Statut Membre Dernière intervention - 18 mars 2021 à 22:36
A voir également:
- Afficher des image depuis la base de donnée php a mon album coder en javascrit
- Code ascii de a à z - Guide
- Album photo partagé - Guide
- Album partagé google - Guide
- Application pour apprendre à coder - Guide
- Image iso - Guide
8 réponses
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
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
finalement les "%22" ont disparuent
mais le problème persiste
mais le problème persiste
Peux tu nous faire un
et nous montrer ce que ça te retourne ?
Egalement, ajouter un console.log dans ton js
avant ton script
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);
Typiquement... j'ai testé comme ceci
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 ...
<?php
$arr = ['/image1.jpeg','/image2.jpeg','/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 ...
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 :
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);
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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>
Il faut déclarer tes variables en dehors des fonctions si tu veux qu'elles aient une portée "globale"
Code corrigé et fonctionnel
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>
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 images where images.idarticle = articles.id and categories = 'immobilier' group by idarticle " ); while($resultat = mysql_fetch_array($requete)) {?> <?php echo $resultat['image']; ?> <?php }?>et le json_encode<gras>
<?php $requete = $bdd->query( "SELECT * FROM articles 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><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>