random image from folder every "x" seconds

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : random image from folder every "x" seconds

Re: random image from folder every "x" seconds

par vincentddd » 12 févr. 2015, 10:35

Merci tof73, ça m'intéresse ! peux tu me dire comment tu fais ça ? :oops:

Re: random image from folder every "x" seconds

par tof73 » 11 févr. 2015, 22:28

tu peux les pre uploadés au fur et à mesure, quand cela demande d'afficher une image, tu charges aussi la suivante de ta liste aléatoire.

Re: random image from folder every "x" seconds

par vincentddd » 11 févr. 2015, 22:17

Le truc c'est que j'ai un dossier de plusieurs centaines d'images et mon diaporama les pioche au hasard ! je ne peux pas toutes les preloader non ?

j'ai l'impression que le problème ne vient pas du chargement des images qui serait trop long car elles ne font que quelques ko chacune et comme par hasard il n'y a pas d'image pendant 10 secondes (temps d'affichage de chaque image).

Re: random image from folder every "x" seconds

par Megadeth » 11 févr. 2015, 15:18

Re,

Ce que tu peux faire c'est un preload des images ou attendre que les images soient chargées pour afficher ta page.

Exemple rudimentaire : http://www.mediacollege.com/internet/ja ... eload.html

Il y a des tas de façon de faire la chose. Si tu utilises Jquery autant profiter de ses fonctions ;)

Mega
;)

Re: random image from folder every "x" seconds

par vincentddd » 11 févr. 2015, 13:37

Bon, je vais encore abuser de vos connaissances.

Ce diaporama fonctionne très bien mais à l'ouverture de la page aucune image ne s'affiche (pendant 10 secondes du coup), il y a juste cette icône de fichier image cassé, ce qui n'est pas esthétique du tout. Comment faire pour que la page cherche directement une image dès l'ouverture ?

Re: random image from folder every "x" seconds

par vincentddd » 11 févr. 2015, 13:32

ça marche, merci :-D

Re: random image from folder every "x" seconds

par Megadeth » 11 févr. 2015, 13:08

Slt,

Soit tu changes la valeur au moment du chargement.

Soit tu gères la fonction à l'action.

Mega
;)

Re: random image from folder every "x" seconds

par vincentddd » 11 févr. 2015, 11:40

Merci beaucoup Megadeth !
Alors ça marche presque bien ! Au niveau du fade out à la fin, tu me conseilles quoi ? J'ai essayé de l'ajouter mais il se met en marche tout de suite après le fade in... On peut le retarder de quelques secondes ?

Re: random image from folder every "x" seconds

par Megadeth » 10 févr. 2015, 09:48

Slt,

Avec les fonctions fadeIn et fadeOut de Jquery.

Exemple :
[javascript]//après chargement du document
$(document).ready(function (){
jQuery("#Picture").load(function(){
//on cache l'image immédiatement
jQuery(this).fadeOut(0, function(){
//on la ré-affiche avec un effet de transparence
jQuery(this).fadeIn(8000);
});
});
});[/javascript]

A toi d'adapter ;)

Re: random image from folder every "x" seconds

par vincentddd » 10 févr. 2015, 00:50

UP :oops:

Re: random image from folder every "x" seconds

par vincentddd » 05 févr. 2015, 00:34

J'ai une dernière petite question ULTRA BASIQUE. Comment ajouter un fade in et un fade out lors de l'apparition et de la disparition de chaque image ?

Re: random image from folder every "x" seconds

par vincentddd » 28 janv. 2015, 12:57

Wow! Merci beaucoup Nestecha!

Re: random image from folder every "x" seconds

par Nestecha » 27 janv. 2015, 00:40

<!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>
Avec :

index.php
img > répertoire contenant les images
js > répertoire contentant jquery.js (librairie jquery)

BASIQUE QUOI =D

Re: random image from folder every "x" seconds

par vincentddd » 25 janv. 2015, 20:04

Salut tof73,

Merci beaucoup pour ta réponse. Je saisis bien tes conseils mais je ne sais pas du tout comment les appliquer !
Si c'est assez simple et rapide pour toi, pourrais-tu écrire le code ? Est-ce correct de demander ça... ?
En tout cas je t'en serais très reconnaissant.

Re: random image from folder every "x" seconds

par tof73 » 25 janv. 2015, 19:42

ton php récupère la liste des images du répertoire, il génère une variable javascript contenant cette liste de nom ordonnée aléatoirement.
en javascript, tu n'as plus qu'à parcourir ta variable tableau, et à afficher l'image suivante toutes les x secondes.
cela fait un seul appel au serveur, contre un à chaque mise à jour avec ton code.