LA PLUS SIMPLE DES GALERIES PHOTO jQUERY
- CONSIGNES
- Votre page doit être liée à la dernière version de jQuery (jquery-1.4.2.js)
- 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-1.4.2.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 galeries photo 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*/
#main {position:absolute;left:30%;top:50%;cursor:pointer;}
/*Dimensionnement des images et fixation du z-index à 1 (Important)*/
#main 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() {
//Clic sur l’image positionné en avant-plan
jQuery('#main img').click(function() {
//S’il s’agit de la dernière image, remise à 1 des z-index de toutes les photos
if (jQuery(this).attr("id")==jQuery('#main img').length)
{jQuery('#main img').css("z-index",1);}
//z-index à -1 sur l’image cliquée pour qu’elle soit positionnée en arrière-plan
jQuery(this).css("z-index",-1);
});
});
</script>
</head>
<body>
<p style="color:#C0C0C0;font-size:28px;">LA PLUS SIMPLE DES GALERIES PHOTO !</p>
<div id="page" >
<font style="color:#FFFF00">SUPERPOSEZ VOS PHOTOS ET FAITES-LES DEFILER EN CLIQUANT DESSUS<br>La plus simple des galeries photos !!! </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 conteneur des images-->
<div id="main">
<--Images de la galerie, Veillez à les numéroter à l’aide de l’id comme ci-dessous (Peut importe le nom du fichier mais la valeur de l’id permettra de savoir s’il s’agit de la première photo visible, à savoir la dernière de la liste)-->
<img id="1" src="images/1.jpg"/>
<img id="2" src="images/2.jpg"/>
<img id="3" src="images/3.jpg"/>
<img id="4" src="images/4.jpg"/>
<img id="5" src="images/5.jpg"/>
<img id="6" src="images/6.jpg"/>
<img id="7" src="images/7.jpg"/>
</div>
</body>
</html>
Page de démonstration : http://www.patrickcleder.com/tuto_33.php