fonction qui refuse de se relancer au clic

Version imprimable

Bonjour bonjour! Je suis développeur php et le peu que je connais de javascript ce sont ses similitudes avec php :aie:

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:

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:

1 2 window.onload=function(){visible(0)};
et ceci dans chacune des miniatures:
Code:

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? 8O

11/12/2011, 15h48
NoSmoking

Bonjour

Citation:

et ceci dans chacune des miniatures:

Code:

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:

onClick="visible( this.id);return false;"

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:

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>