IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

fonction qui refuse de se relancer au clic


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juin 2011
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2011
    Messages : 18
    Par défaut fonction qui refuse de se relancer au clic
    Bonjour bonjour! Je suis développeur php et le peu que je connais de javascript ce sont ses similitudes avec php

    Voilà pourquoi je viens chercher de l'aide ici.

    Je dispose d'une fonction qui réduit l'opacité d'une image au chargement de la page, l'augmente au passage de la sourie, et la réduit encore en sortie de survol. Jusque là aucun problème. Cependant, je souhaiterais qu'au clic sur l'image l'opacité de celle-ci soit à fond et celle des autres réduites.

    Pour imager voyez une galerie d'images avec les miniatures de chacune d'entre elles et en dessous l'image en taille réelle de celle sélectionnée. Mon problème se situe donc au niveau de l'animation des miniatures.

    Voici le code de la fonction:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
    <script type="text/javascript">
    function visible(id){
     
    	for(i=0;i<=7;i++){
    		if(i != id ){
    	$("img#opac"+i).animate({"opacity":"0.5"},0);
     
    	$("img#opac"+i).mouseover(function(){
    	$(this).animate({"opacity":"1"},200);
    	});
     
    	$("img#opac"+i).mouseout(function(){
    	$(this).animate({"opacity":"0.5"},200);
    	});
    		}else{
    			$("img#opac"+i).animate({"opacity":"1"},0);
    		}
    	}
    }
    </script>
    Il y a 8 images par pages.

    J'ajoute ceci pour sélectionner automatiquement la première image au chargement de la page et obscurcir les autres:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    window.onload=function(){visible(0)};
    et ceci dans chacune des miniatures:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    onClick="visible('.$i.');javascript:return false;"
    $i étant incrémentée dans une boucle php. Aucun problème à ce niveau là.

    Et voilà le problème: au clic, toutes les images s'assombrissent et aucune ne s'éclaircit. En revanche ca fonctionne si je remplace directement $i par un chiffre genre 3. Dans ce cas, en cliquant sur n'importe quelle miniature, l'image ayant pour id opac3 serra clair et les autres foncée. Mais pourquoi cela ne fonctionne pas lorsque les paramètres de visible() sont différents dans chacune des miniatures? Là je ne comprends pas.

    Une idée?

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour
    et ceci dans chacune des miniatures:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onClick="visible('.$i.');javascript:return false;"
    $i étant incrémentée dans une boucle php. Aucun problème à ce niveau là.
    ...as tu simplement essayé de mettre
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onClick="visible( this.id);return false;"

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Voici un code (copier-coller pour test) qui joue avec l'opacité des images, 0.5 par défaut et 1 pour l'image cliquée ou survolée.

    Lorsque le survol se termine, on restaure la dernière image cliquée avec une opacité de 1.

    Lorsque la page est chargée, on simule un clic sur la quatrième image, ce qui initialise toutes les images avec une opacité de 0.5 sauf l'image cliquée qui a une opacité de 1.

    C'est plus simple à comprendre en testant l'exemple.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<meta name="Author" content="Daniel Hagnoul">
    	<title>Forum jQuery</title>
    	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
    	<style>
    		/* Base */
    		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
    		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
    		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
    		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
    		p, div, td {word-wrap:break-word; }
    		pre, code {white-space:pre-wrap; word-wrap:break-word; }
    		img, input, textarea, select {max-width:100%; }
            img {border:none; }
    		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
    		p {padding:0.6rem; }
    		ul {margin-left:2.4rem; }
    		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
    		footer {margin-left:3.6rem; }
     
    		/* --- */
    		img.opac {width:20rem; height:20rem; }
    	</style>
    </head>
    <body>	
    	<h1>Forum jQuery</h1>
    	<section class="conteneur">
    		<img id="opac0" class="opac" src="http://danielhagnoul.developpez.com/images/imageTest.png" />
    		<img id="opac1" class="opac" src="http://danielhagnoul.developpez.com/images/imageTest.png" />
    		<img id="opac2" class="opac" src="http://danielhagnoul.developpez.com/images/imageTest.png" />
    		<img id="opac3" class="opac" src="http://danielhagnoul.developpez.com/images/imageTest.png" />
    		<img id="opac4" class="opac" src="http://danielhagnoul.developpez.com/images/imageTest.png" />
    		<img id="opac5" class="opac" src="http://danielhagnoul.developpez.com/images/imageTest.png" />
    		<img id="opac6" class="opac" src="http://danielhagnoul.developpez.com/images/imageTest.png" />
    		<img id="opac7" class="opac" src="http://danielhagnoul.developpez.com/images/imageTest.png" />
    		<img id="opac8" class="opac" src="http://danielhagnoul.developpez.com/images/imageTest.png" />
    	</section>
    	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    	<script>
    		"use strict";
     
    		$(function(){
    			/*
    			 * Gestion du clic et du survol sur les éléments
    			 * d'ID opacX. Remplace la méthode visible() et
    			 * les onClick="visible('.$i.');javascript:return false;"
    			 */
     
    			var self = null, // l'élément cliqué
    				jObjOpac = $("[id^='opac']"); // l'objet jQuery incluant les éléments d'ID opacX
     
    			jObjOpac.click(function(){
    				// sauvegarde de l'élément cliqué
    				self = this;
     
    				jObjOpac.stop(true, true).fadeTo(200, 0.5);
    				$(self).fadeTo(200, 1);
     
    				return false;
    			}).hover( // gestion du survol si this n'est pas self
    				function(){ // mouseenter
    					if (this != self){
    						jObjOpac.stop(true, true).fadeTo(200, 0.5);
    						$(this).fadeTo(200, 1);
    					}
    				},
    				function(){ // mouseleave
    					if (this != self){
    						jObjOpac.stop(true, true).fadeTo(200, 0.5);
    						$(self).fadeTo(200, 1); // restaure self
    					}
    				}
    			);
    		});
     
    		$(window).load(function(){			
    			/*
    			 * Initialisation.
    			 * Lorsque la page est chargée, on
    			 * met l'opacité de tous les éléments
    			 * à 0.5 puis on met le quatrième élément en évidence.
    			 * eq() est base 0, donc 3 == quatrième élément
    			 */
    			$("[id^='opac']").eq(3).click();
    		});
    	</script>
    </body>  
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. [langage] Creer une fonction qui met en majuscule ?
    Par Cyber@l dans le forum Langage
    Réponses: 6
    Dernier message: 04/12/2003, 18h44
  2. fonction qui initialise a blanc zone de texte
    Par access dans le forum Requêtes
    Réponses: 1
    Dernier message: 27/11/2003, 16h36
  3. fonction qui en fait planter une autre
    Par ickis dans le forum C
    Réponses: 5
    Dernier message: 18/08/2003, 21h33
  4. Fonction qui s'active lorsqu'un Form bouge
    Par Xavier dans le forum C++Builder
    Réponses: 3
    Dernier message: 22/05/2003, 12h54
  5. 2 fonctions qui tournent en même temps
    Par GOUGOU1 dans le forum C
    Réponses: 7
    Dernier message: 07/12/2002, 18h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo