[RESOLU] Diaporama: afficher le nom du fichier de l'image

Eléphanteau du PHP | 22 Messages

12 févr. 2015, 10:40

Bonjour tout le monde !

Je suis actuellement en train de réaliser un diaporama qui puise une image aléatoirement dans un dossier toutes les 10 secondes. Il fonctionne bien ! La prochaine étape serait d'afficher le nom du fichier de l'image, en même temps que celle-ci (sans l'extension .jpeg, de préférence).
Auriez vous des pistes ?

Merci beaucoup !
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>

<script type="text/javascript">var aDatas = [];</script>

<?php

$aImages = scandir('img');
$i = 0;

foreach($aImages as $iKey => $sImage) {
    if (strpos($sImage, 'png') !== false || strpos($sImage, 'jpg') !== false) {
        ?>

        <script type="text/javascript">
            aDatas.push(<?php echo json_encode($sImage); ?>);
        </script>

        <?php
    }
}

?>

<img src="">

<script>

    function shuffle(array) {
        var currentIndex = array.length, temporaryValue, randomIndex ;

        // While there remain elements to shuffle...
        while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
        }

        return array;
    }

    shuffle(aDatas);

    var i = 0;

    setInterval(function() {
        $('img').attr('src','img/' + aDatas[i]);
        i++;
        if (i == aDatas.length) {
            i = 0;
        }
    }, 500)
</script>


</body>
</html>

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

12 févr. 2015, 23:31

Salut,

Ajoute un span ou une div en dessous tu peux ensuite mettre le nom du fichier simplement en js et même virer l'extension


@+
Il en faut peu pour être heureux ......

Eléphanteau du PHP | 22 Messages

15 févr. 2015, 11:51

Merci beaucoup Moogli ! Je comprends bien la logique mais malgré mes recherches je n'arrive pas à l'appliquer ! Pourrais tu m'aider ? :oops:

ViPHP
ViPHP | 1996 Messages

16 févr. 2015, 23:54

Essayes un truc du genre :

setInterval(function() {
$('img').attr('src','img/' + aDatas);
if ($('img').next('span').length == 0) {
//création du span
var span = document.createElement('span');
}
$(span).html('Nom du fichier : '+aDatas);
$(span).insertAfter('img');

i++;
if (i == aDatas.length) {
i = 0;
}
}, 500)
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphanteau du PHP | 22 Messages

18 févr. 2015, 17:09

Génial, merci beaucoup Aureusms ! Ça marche super bien mais ça ne se recharge pas avec les images ?
Je l'ai pourtant intégré dans mon script:

[javascript]<script>

function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex ;

// While there remain elements to shuffle...
while (0 !== currentIndex) {

// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;

// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}

return array;
}

shuffle(aDatas);

var i = 0;

setInterval(function() {
$('img').attr('src','image/' + aDatas);
i++;
if (i == aDatas.length) {
i = 0;
}
if ($('img').next('span').length == 0) {
//création du span
var span = document.createElement('span');
}
$(span).html('Intérieur #'+aDatas);
$(span).insertAfter('img');

i++;
if (i == aDatas.length) {
i = 0;
}
}, 10000)[/javascript]

Qu'en penses-tu ?

Mammouth du PHP | 688 Messages

18 févr. 2015, 17:20

il ne faut qu'une seule fois ces lignes :
i++;
if (i == aDatas.length) {
i = 0;
}

Eléphanteau du PHP | 22 Messages

18 févr. 2015, 17:36

Merci, j'ai corrigé ça mais la span ne recharge pas le nom de la nouvelle image (toutes les 10 secondes) pour autant ! Sais-tu ce qui ne va pas ?

ViPHP
ViPHP | 1996 Messages

18 févr. 2015, 22:11

Bon pourquoi pas détruire la span créée précédemment pour la recharger avec un petit effet :

[javascript]setInterval(function() {
$('img').attr('src','img/' + aDatas);
if ($('img').next('span').length != 0)
$('img').next('span').hide('slow',function() {
$(this).remove();
});
var span = document.createElement('span');
$(span).html('Nom du fichier : '+aDatas);
$(span).css({display:'none'}).insertAfter('img').show('slow');

i++;
if (i == aDatas.length) {
i = 0;
}
}, 500)[/javascript]
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphanteau du PHP | 22 Messages

19 févr. 2015, 01:21

Merci beaucoup Aureusms pour ton investissement !
Le "remove" ne fonctionne pas chez moi, les noms se superposent.
Une petite idée ? (promis après j'embête plus) :oops:

ViPHP
ViPHP | 1996 Messages

19 févr. 2015, 09:49

Rhaaa... Pas facile sans débugger...
Les contenus ne peuvent pas se superposer, ils peuvent seulement se mettre à la suite avec un SPAN. Je pense plutôt que les SPAN se superposent (à voir dans le DOM avec un debugger de type firebug ou F12 dans les "bons" navigateurs internet ie. firefox (pas Chrome : chrome is bad for you personnal data and it is slower than FF...)

Revenons à ton problème : je pense que le moteur Jquery ne trouve pas le SPAN et c'est pour cela qu'il les superpose (supposition).
Je pense, en effet, que comme 'img' ne fais pas encore parti du DOM ou n'est pas identifié comme tel, il ne peut trouver le SPAN frère en position suivante. Aussi, on peut tenter de créer le SPAN s'il n'existe pas, ou s'il existe de le cacher puis le remplir et l'afficher dans la foulée... Cependant je crois que cela reviendra à la même chose.... Essayes d'analyser le DOM

[javascript]setInterval(function() {
$('img').attr('src','img/' + aDatas);
var span = ($('img').next('span').length == 0) ? document.createElement('span') : $('img').next('span');
$(span).hide('slow').html('Nom du fichier : '+aDatas);
if ($('img').next('span').length == 0)
$(span).insertAfter('img').show('slow');
else
$(span).show('slow');

i++;
if (i == aDatas.length) {
i = 0;
}
}, 500)[/javascript]
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphanteau du PHP | 22 Messages

19 févr. 2015, 16:31

Génial, ça marche ! Merci infiniment Aureusms !
Et pour enlever les extensions .jpeg et .png ?

ViPHP
ViPHP | 1996 Messages

23 févr. 2015, 10:55

Pour enlever les extentions, je ferai un petti regex en l'ajoutant avant $(span).hide('slow')...:

[javascript]var nomImage = aDatas;
var reg = /(.+)\.(jpeg|jpg|png|gif)$/;
if (reg.test(nomImage)) {
var ex = reg.exec(nomImage);
nomImage = ex[1];
}
$(span).hide('slow').html('Nom du fichier : '+nomImage);
[/javascript]
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr