Page 1 sur 1
Diaporama: afficher le nom du fichier de l'image
Posté : 12 févr. 2015, 10:40
par vincentddd
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>
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 12 févr. 2015, 23:31
par moogli
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
@+
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 15 févr. 2015, 11:51
par vincentddd
Merci beaucoup Moogli ! Je comprends bien la logique mais malgré mes recherches je n'arrive pas à l'appliquer ! Pourrais tu m'aider ?
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 16 févr. 2015, 23:54
par Aureusms
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)
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 18 févr. 2015, 17:09
par vincentddd
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 ?
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 18 févr. 2015, 17:20
par tof73
il ne faut qu'une seule fois ces lignes :
i++;
if (i == aDatas.length) {
i = 0;
}
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 18 févr. 2015, 17:36
par vincentddd
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 ?
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 18 févr. 2015, 22:11
par Aureusms
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]
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 19 févr. 2015, 01:21
par vincentddd
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)
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 19 févr. 2015, 09:49
par Aureusms
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]
Re: Diaporama: afficher le nom du fichier de l'image
Posté : 19 févr. 2015, 16:31
par vincentddd
Génial, ça marche ! Merci infiniment Aureusms !
Et pour enlever les extensions .jpeg et .png ?
Re: [RESOLU] Diaporama: afficher le nom du fichier de l'imag
Posté : 23 févr. 2015, 10:55
par Aureusms
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]