Actualisation d'image

22 déc. 2015, 21:05

Bonjour

J'ai dans une bdd plusieurs entrées avec des images.

Sur mon site je fais apparaitre une de ces images. je voudrais que cette image change après quelques secondes sans devoir réactualiser la page entière.

Voici le code que j'utilise pour récupérer l'image de ma bdd:

Code : Tout sélectionner

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

On m'a indiqué qu'il était possible de le faire avec:

Code : Tout sélectionner

setInterval("instructions", délai)

en récupérant la liste des images dans un tableau, puis de transformer ce tableau au format json
mais je n'y connais rien en javascript, json...
Quelqu'un pourrait-il m'éclairer sur la procédure, svp.

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.

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.

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.

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>

23 déc. 2015, 20:58

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

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.

23 déc. 2015, 21:29

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

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

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

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.

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.

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 .

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>

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.

Actualisation d'image

Qui est en ligne