Actualisation d'image

par **Patriboom** » 05 janv. 2016, 17:43

Code : Tout sélectionner
<img src="#" id="image" /> <script type="text/javascript"> // var images = ['image1.png', 'image2.jpg', 'image3.png']; cette ligne devient ... (remplacement de la ligne des images) var images = new Array(); <?php while ($Quel = mysqli_fetch_array($resultat)) { echo "images[] = '".$Quel["NomImage"]."';"; } ?> //Fin du remplacement de la ligne des images var i = 0; function ImageRotation() { document.getElementById("image").src = images[i]; (i < images.length - 1) ? i++ : i=0; setTimeout("ImageRotation()", 2000) } window.onload = function(){ ImageRotation(); } </script>
Comment remplacer la ligne
Code : Tout sélectionner
var images = ['image1.png', 'image2.jpg', 'image3.png'];
par la boucle de lecture de la bdd ?
J'ai tenté plusieurs approches sans succès.

par **cite carter** » 05 janv. 2016, 16:43

Code : Tout sélectionner

<img src="#" id="image" /> 
<script type="text/javascript"> 
var images = ['image1.png', 'image2.jpg', 'image3.png'];
var i = 0;
 
function ImageRotation() {
    document.getElementById("image").src = images[i]; 
    (i < images.length - 1) ? i++ : i=0; 
    setTimeout("ImageRotation()", 2000)
}
 
window.onload = function(){
    ImageRotation();
}
</script>

Comment remplacer la ligne

Code : Tout sélectionner

var images = ['image1.png', 'image2.jpg', 'image3.png'];

par la boucle de lecture de la bdd ?
J'ai tenté plusieurs approches sans succès.

par **Patriboom** » 04 janv. 2016, 21:13

Alors, il te suffit de faire une boucle de lecture de ta bdd

Code : Tout sélectionner

<script>
var imgs = new Array();
<?php 
while ($Quel = mysqli_fetch_array($resultat)) {
     echo "imgs[] = '".$Quel["NomImage"]."';";
}
?>
</script>

par **cite carter** » 04 janv. 2016, 20:22

En PHP, tu emplis un tableau javascript des noms de tes images.
En boucle javascript, tu renouvelles ton image à l'aide de la commande que tu cites setInterval

C'est exactement ce qui m’intéresse, mais je rame dessus depuis quinze jours sans réussite, sachant que je ne veux pas entrer les noms des images manuellement mais l'automatiser par des requètes dès qu'ils sont ajoutés à la bdd .

par **Patriboom** » 04 janv. 2016, 16:55

Tu peux faire ça en javascript à même la page.
Est-ce que ça t'intéresse?

En PHP, tu emplis un tableau javascript des noms de tes images.
En boucle javascript, tu renouvelles ton image à l'aide de la commande que tu cites setInterval

En pur PHP, je ne vois pas de solution, mais il y a une passe-passe que tu peux faire en PHP-javascript dans iframe.
Le iframe est une page PHP qui lit ta bdd et choisis une image. Le javascript de cet iframe rafraîchit l'image de la page principale et commande un rafraîchissement de l'iframe.

par **cite carter** » 04 janv. 2016, 03:06

Bonne année à tous.
Je suis toujours à la recherche d'une solution à mon problème et de préférence sans ajax.

par **cite carter** » 24 déc. 2015, 00:31

J'arrive à afficher une image de la bdd mais pas d'actualisation.

mon code php:

Code : Tout sélectionner

$rst = $bdd->query('SELECT image from matable LIMIT 0, 1');
while($donnees = $rst->fetch())
{
$tableau[] = $donnees;
}
foreach($tableau as $cle)
{
foreach($cle as $leChamp => $valeur)
{
}
}
if (empty($valeur)) {
echo '<img src="imagedefaut.jpg" id="image"/>';
}
else {
echo '<img src="image/'.$valeur.'" id="image" />';
}
$rst->closeCursor();

Le script:

Code : Tout sélectionner

var images = <?php echo json_encode($valeur); ?>[];
var i = 0;
 
function ImageRotation() {
    document.getElementById("image").src = images[i]; 
    (i < images.length - 1) ? i++ : i=0; 
    setTimeout("ImageRotation()", 2000)
}
 
window.onload = function(){
    ImageRotation();
}

par **or 1** » 23 déc. 2015, 21:39

il y a pourtant une bonne base de départ avec le code que tu as donné :

$rst = $bdd->query('SELECT image from matable order by Rand() LIMIT 0, 1');
while($donnees = $rst->fetch())
{
$image = nl2br($donnees['image']);
if (empty($image)) {
echo '<img src="imagedefaut.jpg" />';
}
else {
echo '<img src="image/'.$donnees['image'].'" alt="image"/>';
}         
}
$rst->closeCursor();

par **cite carter** » 23 déc. 2015, 21:29

ça c'est un gros problème pour moi, ça fait une semaine que je patauge.

par **or 1** » 23 déc. 2015, 21:03

tu génères la ligne :
var images = ['image1.png', 'image2.jpg', 'image3.png'];
à partir du php qui fait une requete sql sur la table adéquate.

par **cite carter** » 23 déc. 2015, 20:58

Super, mais comment introduire mes images récupérées par une requête sql ?

par **KriSpiX** » 23 déc. 2015, 16:50

Voici un exemple simple juste en JS.

Code : Tout sélectionner

<img src="#" id="image" /> 
<script type="text/javascript"> 
var images = ['image1.png', 'image2.jpg', 'image3.png'];
var i = 0;
 
function ImageRotation() {
    document.getElementById("image").src = images[i]; 
    (i < images.length - 1) ? i++ : i=0; 
    setTimeout("ImageRotation()", 2000)
}
 
window.onload = function(){
    ImageRotation();
}
</script>

par **or 1** » 23 déc. 2015, 00:49

la base, c'est cela :
document.getElementById("imageid").src="../template/save.png";
mais vu que tu dis ne rien n'y connaitre, cela sera plus à mettre en place qu'un diaporama.

par **cite carter** » 22 déc. 2015, 23:19

J'ai déjà utilisé ce genre de diaporama ou autre slider, mais je cherche une solution plus légère qui ne ferait que actualiser l'image ou le div qui la contient.

par **or 1** » 22 déc. 2015, 22:29

http://www.guillaumevoisin.fr/developpe ... vec-jquery
où ton php doit générer dynaniquement cette partie :
<ul class="diaporama">
<li><img src="img/galerie/image1.jpg" alt="Image 1" /></li>
<li><img src="img/galerie/image2.jpg" alt="Image 2" /></li>
<li><img src="img/galerie/image3.jpg" alt="Image 3" /></li>
<li><img src="img/galerie/image4.jpg" alt="Image 4" /></li>
<li><img src="img/galerie/image5.jpg" alt="Image 5" /></li>
</ul>
du code html.

Actualisation d'image

Répondre

Étendre la vue Revue du sujet : Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image

Re: Actualisation d'image