CodeS-SourceS
Rechercher un code, un tuto, une réponse

La plus simple des galeries photo en jquery !

Juin 2017


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


[Image:http://static.commentcamarche.net/codes-sources.commentcamarche.net/pictures/faq-255c2c6ad288e308b92694bf1f72ab7d.png|500px||center]

Adresse d'origine

A voir également

Publié par pjcleder.
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.
Ajouter un commentaire

Commentaires

Donnez votre avis
Gestion dynamique du z-index + divers effets en jquery
Gerer la luminosite des images de votre galerie