Quelques lignes de Javascript et de jQuery vous suffiront pour afficher photos et images de façon aléatoire en rafraichissant l'ensemble à une cadence déterminée.
Utile pour une galerie photo ou faire défiler une série d'images automatiquement.
UNE GALERIE PHOTO jQuery ALEATOIRE
Ensuite, placez le code suivant entre les balises<head></head> :
<script type="text/javascript" src="jquery-version.js"></script>
Collez ce code dans l’éditeur de votre choix et enregistrez le avec une extension de type .html ou .php à la racine de votre site.
<!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>