La plus simple des galeries photo en jquery !

Dernière mise à jour le par ashpl .

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/

HTML, jQuery, CSS

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.

debut de fichier

<!doctype html>


<head>


<head>


<title>La plus simple des galeries photo en jQuery</title>

Style générale de la page

<style>

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>

la partie jQuery

<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>


LA PLUS SIMPLE DES GALERIES PHOTO !

    


SUPERPOSEZ VOS PHOTOS ET FAITES-LES DEFILER EN CLIQUANT DESSUS
La plus simple des galeries photos !!! 


Affichez le code source ou cliquez ici pour recevoir le tutoriel par mail.


<--Div conteneur des images-->

<--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)-->

Adresse d'origine

Ce document intitulé « La plus simple des galeries photo en jquery ! » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Gestion dynamique du z-index + divers effets en jquery
Gerer la luminosite des images de votre galerie
Rejoignez-nous