Script affichage plusieurs gif position aléatoire + refresh

Signaler
Messages postés
50
Date d'inscription
dimanche 15 novembre 2009
Statut
Membre
Dernière intervention
11 juin 2018
-
Messages postés
50
Date d'inscription
dimanche 15 novembre 2009
Statut
Membre
Dernière intervention
11 juin 2018
-
Bonjour à tous,

Je suis interessé à titre personnel d'ajouter un peu d'animation sur mon forum PHPBB3, notamment sur la page d'accueil.

Je recherche un script permettant d'afficher plusieurs gifs sélectionnés (dans mon cas des gifs de fleurs qui s'ouvrent) à intervalles aléatoires dans des positions aléatoires sur tout l'écran (axes x et y donc). j'ai déjà trouvé quelques codes permettant de générer une image et de generer sa position aléatoire puis de la faire apparaitre ailleurs. Ma demande est plus compliquée dans le sens ou tout est aléatoire : (l'image affichée, la position sur l'ecran et le temps entre chaque réapparition sachant qu'il faut prendre en compte le temps que les fleurs mettent pour éclore avant de les faire disparaître).

Voilà j'espère que je suis assez clair dans mes explications :-).

Auriez-vous l'extrême gentillesse de me proposer qqc qui se rapproche de cette demande svp?

Merci d'avance.

Manu

2 réponses

Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
342
Bonjour,

Je doute qu'il existe un code tout fait qui corresponde exactement à ta demande..... il faudra donc mettre un peu les mains dans le code....

'ai déjà trouvé quelques codes permettant de générer une image et de generer sa position aléatoire puis de la faire apparaitre ailleurs.

Le plus simple est de partir du code que tu as trouvé et d'essayer de l'adapter à tes besoins.

Et donc pour ça.. il faut nous le montrer.

PS: Merci de bien vouloir utiliser la coloration syntaxique (les balises de code) lorsque tu postes du code sur le forum.
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Messages postés
50
Date d'inscription
dimanche 15 novembre 2009
Statut
Membre
Dernière intervention
11 juin 2018

Bonjour Jordan,

Merci de ton retour, je n'ai pas réussi à retrouver le code que j'avais vu la dernière fois mais celui-ci s'en rapproche un peu :

http://codes-sources.commentcamarche.net/faq/1251-affichage-aleatoire-d-une-image-et-rafraichissement-automatique-javascript-et-jquery

<script type="text/javascript" src="jquery-version.js"></script>


<!doctype html>

<head>

<head>

<title>La plus simple des galerie photos en jQuery</title>



<style>



/*Style général de la page*/

body {font:14px verdana, sans-serif;background:#000000;color:#C0C0C0;font-weight:bold;overflow:hidden;}



/*Position de la galerie*/

#videg {position:absolute;left:30%;top:50%;cursor:pointer;}



/*Dimensionnement des images et fixation du z-index à 1 (Important)*/

#videg img {width:150px;height:150px;position:absolute;left:0;top:0;z-index:1}



/*Style des différents corps de texte de la page*/

#page {font:14px verdana, sans-serif;color:#C0C0C0;font-weight:bold;position:absolute;left:100px;top:100px;background:#000000;}



#mess {position:absolute;left:22%;top:80%;cursor:pointer;}

</style>


<script type="text/javascript" src="jquery-1.4.2.js"></script>







<script type="text/javascript">

//Evite les conflits avec d'éventuels autres plugins lies à la page

jQuery.noConflict();

//Implémentation des fonctions au chargement de la page

jQuery(document).ready(function() {

//Fonction retournant un nombre entier aléatoire entre 1 et 13
//13 étant le nombre d'images contenues dans dans la div

function rnd() {

    var nId =Math.floor(Math.random()*14);

    //Remise à 1 des z-index de toutes les images

    jQuery('#videg img').css("z-index",1);

    //L'image dont l'id est tiré de façon aléatoire voit son
    //z-index mis à 2. De ce fait, elle apparait au-dessus des autres.

    jQuery("#" + nId + "r").css("z-index",2);

         }

//Chargement de la fonction au lancement de la page

jQuery(function() {

    rnd();

    //Implémentation de la fonction toutes les 2 secondes

    setInterval("rnd();",2000);

            });

            

            

</script>

</head>

<body>

<p style="color:#C0C0C0;font-size:28px;">AFFICHAGE ALEATOIRE D'IMAGES !</p>    

<div id="page" >

<font style="color:#FFFF00">AFFICHEZ VOS PHOTOS AU HASARD<br>une galerie photo ultra-simple !!! </font><br>

Affichez le code source ou cliquez <a href="newsletter.php" style="color:#FFFF00;text-decoration:none">ici</a> pour recevoir le tutoriel par mail.<br><br>

</div>

<!--Div contenant les images-->

<div id="videg" />

<img id="1r" src="1.jpg" />

<img id="2r" src="2.jpg" />

<img id="3r" src="3.jpg" />

<img id="4r" src="4.jpg" />

<img id="5r" src="5.jpg" />

<img id="6r" src="6.jpg" />

<img id="7r" src="7.jpg" />

<img id="8r" src="8.jpg" />

<img id="9r" src="9.jpg" />

<img id="10r" src="10.jpg" />

<img id="11r" src="11.jpg" />

<img id="11r" src="12.jpg" />

<img id="12r" src="13.jpg" />

</div>

<br>

<div id="mess">AFFICHAGE ALEATOIRE D'IMAGES<br></div>

</body>

</html>


La déclaration des images me parait bonne, leur affichage aléatoire me parait pas mal. il manque la position aléatoire de leur affichage et si possible le fait d'en afficher plusieurs en même temps. exemple : instant T : images 2,6,7,10, s'affichent, instant T+1, images 3,4,5,8 s'affichent, T+2, images 2,6,7,10 disparaissent et d'autres apparaissent à d'autres endroits etc.

Je ne suis pas programmeur, juste amateur, je peux comprendre un code plus ou moins mais pas vraiment le créer de mes mains par manques de connaissances principalement.

Merci d'avance.