UNE GALERIE PHOTO jQuery ALEATOIRE
- CONSIGNES
- Votre page doit être liée une version de jQuery
- Si ce n’est pas le cas, vous pouvez télécharger ce fichier sur http://api.jquery.com/
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>
Exemple visible sur http://www.patrickcleder.com/tuto_35.php