Changement de class onclick

Version imprimable

Bonjour,
j'ai un problème pour afficher un petit code en jquery.
La première partie fonctionne mais pas la fin.
Il change bien la classe mais ne la prends pas en compte lors du click.
Je sèche, avec vous une idée ? j'ai zappé un truc?

Pour l'instant il ne prend pas en compte le changement de classe ( bien que la div 'click.off' n'existe plus lors du deuxième click...
Merci !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $(document).ready(function(){ $('#click.off').click(function(){ $('img').animate({ width: '900px' }, 500, function(){ $('#click.off').removeClass().addClass("on"); }); }); $('#click.on').click(function(){ $('img').animate({ width: '450px' }, function(){ $('#click.on').removeClass().addClass("off"); }); }); });

Bonsoir

Exemple :

Code:

#divID { width: 100px; height: 100px; border: 1px solid red; background-color: lightgrey; }

Code:

1
2
3
<div id="divID"></div>
 
<img src="http://danielhagnoul.developpez.com/images/imageTest.png">

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
$( function(){
 
	/*
	 * Si la division d'ID "divID" ne possède pas
	 * la classe "tropLarge" on agrandit la largeur
	 * de l'image de 450 px. Dans le cas inverse, on
	 * réduit la largeur de 450 px.
	 * 
	 * On termine en ajoutant ou en retirant la classe
	 *  "tropLarge" à la division 
	 * (http://api.jquery.com/toggleClass/).
	 */
 
    $( "#divID" ).on( "click", function(){
    	var jObj = $( this );
 
    	if ( ! jObj.hasClass( "tropLarge" ) ){
        	$( 'img' ).animate({ "width" : "+=450px" }, 3000 );
    	} else {
        	$( 'img' ).animate({ "width" : "-=450px" }, 3000 );
    	}
 
    	jObj.toggleClass( "tropLarge" );
    });
 
});

28/01/2013, 08h18
Bovino

Citation:

Pour l'instant il ne prend pas en compte le changement de classe

Non, ce n'est pas tout à fait ça...

Quand tu écris

Code:

$('#click.off').on("click", function(){...});

jQuery affecte à tous les éléments du document ayant la classe "off" l'action liée à l'événement.
Mais quand tu modifies la classe, les éléments recevant cette classe n'ont pas été "initialisés" donc le clic ne les concerne pas !
Il faut soit utiliser les événements délégués, soit gérer tous les éléments dans un même événement dans lequel tu différencieras ceux ayant la classe on de ceux ayant off.

En tout état de cause, lorsque tu affectes un événement, seuls les éléments présents dans le DOM au moment de l'affectation sont concernés.
28/01/2013, 08h45
SpaceFrog

Code:

$('#click.off')

Citation:

jQuery affecte à tous les éléments du document ayant la classe "off" l'action liée à l'événement.

Pas tout à fait Bovino, l'élément unique ayant pour id click et pour class .off
28/01/2013, 08h52
Bovino

Oui, au temps pour moi :

Citation:

jQuery affecte à l'élément du document ayant l'id click et la classe "off" l'action liée à l'événement.

Merci beaucoup, avec ce code ça fonctionne :

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
$(document).ready(function(){
    $( function(){
 
 
 
        $( '.divID img' ).on( "click", function(){
            var jObj = $( this );
 
            if ( ! jObj.hasClass( "on" ) ){
                $( this ).animate({
                    "width" : "+=450px", 
                    "height" : "+=450px"
                }, 500 );
            } else {
                $( this ).animate({
                    "width" : "-=450px", 
                    "height" : "-=450px"
                }, 500 );
            }
 
            jObj.toggleClass( "on" );
        });
 
    });
});

Mais maintenant j'aimerais que sur certaines div (à définir) l'effet animate s’effectue de droite a gauche ( c'est de gauche à droite par défaut ),
je cherche mais ne trouve pas ... est ce possible ??
Merci!

28/01/2013, 21h40
danielhagnoul

Vu les transformations que vous avez fait subir à mon code pour l'adapter au vôtre, il serait prudent de nous donner le contexte (HTML, CSS, JS) avant de poursuivre.

Donc voici mes codes.

CSS

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
html, body {
    height: 100%;
    background-color: gray;
}
html {
    min-width: 100%;
}
 
img {
    border-radius: 5px;
    width: 450px;
    height: 450px;
    margin: 0;
    padding: 0;
}
 
#container {
    position: relative;
    margin: 0 auto;
    width: 950px;
    background-color: darkgray;
}
.divID {
    display: inline-block;
    position: relative;
}

HTML

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
<!DOCTYPE html>
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/style.css" />
        <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
        <script src="js/functions3.js" type="text/javascript"></script>  
 
        <title>site</title>
 
 
    </head>
 
    <body>
        <div id="container">
            <div class="divID">
                <img src="images/vignettes/1.jpg" alt="" >
            </div>
            <div class="divID">
                <img src="images/vignettes/6.jpg" alt="" >
            </div>
            <div class="divID">
                <img src="images/vignettes/7.jpg" alt="" >
            </div>
        </div>
    </body>
</html>

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
$(document).ready(function(){
    $( function(){
 
 
 
        $( '.divID img' ).on( "click", function(){
            var jObj = $( this );
 
            if ( ! jObj.hasClass( "on" ) ){
                $( this ).animate({
                    "width" : "+=450px", 
                    "height" : "+=450px"
                }, 500 );
            } else {
                $( this ).animate({
                    "width" : "-=450px", 
                    "height" : "-=450px"
                }, 500 );
            }
 
            jObj.toggleClass( "on" );
        });
 
    });
});

Quand je clique sur une image elle s'agrandit bien avec animate à partir du coin haut gauche, (celle qui était dans la div à sa droite glisse alors en bas à gauche) j'aimerais que les images qui ce trouves à droite s'agrandissent à partir du coin haut droit...( afin d'éviter qu'il y ai un "trou" sans image ) est ce possible ?
Et comment définir que telle image placé à gauche ou à droite s'anime de telle ou telle façon ??
Je continue à chercher mais sans résultat pour le moment...
Si quelqu'un à une piste à me donner se serait super !
Merci!

Ce n'est qu'un problème de réglage CSS. Il faut que la taille des images, la taille de la déformation de l'image et la taille des conteneurs soient en harmonie. Et aligner les blocs en ligne au sommet du conteneur. 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( "http://danielhagnoul.developpez.com/lib/raphael-min.js", 
			{ "jq" : "http://code.jquery.com/jquery-2.0.0b1.js" },
			"http://code.jquery.com/jquery-migrate-1.0.0.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js" );
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
		aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
 
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#container {
		    position: relative;
		    margin: 0 auto;
		    margin-top:12px;
		    margin-bottom:24px;
		    min-width: 900px;
		    max-width: 1024px;
		    min-height:500px;
		    background-color: darkgray;
		}
		.divID {
		    position: relative;
		    display: inline-block;
		    vertical-align:top;
		}
		img {
		    width: 200px;
		    height: 200px;
		    margin: 0;
		    padding: 0;
		}
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1302316/\
				webmasters-developpement-web/javascript/bibliotheques-frameworks/\
				jquery/changement-class-onclick/">Lien</a>
			</h2>
		</hgroup>
	</header>
 
    <div id="container">
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
    </div>
 
	<!--
	<section class="conteneur">				
		<section class="table1">
			<section class="caption">
				<h3>Sous-titre</h3>
			</section>
			<section class="ligne">
				<article>
 
 
				</article>
				<article>
 
 
				</article>
			</section>
		</section>
	</section>
	-->
 
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-28T10:36:10.418+01:00" pubdate>2013-01-28T10:36:10.418+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>
		"use strict";
 
		head( "jq", function(){ // Voir : http://headjs.com/
 
	        $( '.divID img' ).on( "click", function(){
	            var jObj = $( this );
 
	            if ( ! jObj.hasClass( "on" ) ){
	                $( this ).animate({
	                    "width" : "+=200px", 
	                    "height" : "+=200px"
	                }, 500 );
	            } else {
	                $( this ).animate({
	                    "width" : "-=200px", 
	                    "height" : "-=200px"
	                }, 500 );
	            }
 
	            jObj.toggleClass( "on" );
	        });
 
		});
	</script>
</body>
</html>

30/01/2013, 12h54
moiju

En fait ce n'est pas ce que je veux faire.
Pour l'instant j'ai mis 3 div/image mais par la suite il y'en aura plus (20 voir +).
Donc elles seront en colonne (par 2 a priori) d’où mon problème avec les images qui se trouve a droite ...

Est ce que si je récupère, dans mon script, les coordonnées (ordonnée X dans ce cas) et que je lui dit que si l'image a telle valeur X (x>450px) tu déplace la div précédente (qui se trouve à sa gauche) de 450px en bas et que tu anime cette div (x>450px) de droite à gauche (en prenant comme référence le coin haut droit)...
ça pourrait fonctionner ??
puis je mettre plusieurs condition (if) à la suite ou il faut que j'utilise if else ??
Si j'arrive à écrire un code fonctionnel je le posterais.
Merci!
30/01/2013, 22h30
danielhagnoul

Je viens de faire un test de mon code du message n° 9 avec 13 images au lieu de 3, il y a les déformations de la page provoquée par l'agrandissement d'une image, mais je ne vois pas et je ne comprends pas le "problème du trou à droite".

J'ai repris ton code et ai modifié les dimensions de la div "container", c'est plus proche de ce que je veux faire.

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( "http://danielhagnoul.developpez.com/lib/raphael-min.js", 
			{ "jq" : "http://code.jquery.com/jquery-2.0.0b1.js" },
			"http://code.jquery.com/jquery-migrate-1.0.0.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js" );
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
		aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
 
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#container {
		    position: relative;
		    margin: 0 auto;
		    margin-top:12px;
		    margin-bottom:24px;
		    width: 405px;
		    min-height:500px;
		    background-color: darkgray;
		}
		.divID {
		    position: relative;
		    display: inline-block;
		    vertical-align:top;
		}
		img {
		    width: 200px;
		    height: 200px;
		    margin: 0;
		    padding: 0;
		}
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1302316/\
				webmasters-developpement-web/javascript/bibliotheques-frameworks/\
				jquery/changement-class-onclick/">Lien</a>
			</h2>
		</hgroup>
	</header>
 
    <div id="container">
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
                <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
                <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
                <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
        </div>
        <div class="divID">
            <img src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
        </div>
    </div>
 
	<!--
	<section class="conteneur">				
		<section class="table1">
			<section class="caption">
				<h3>Sous-titre</h3>
			</section>
			<section class="ligne">
				<article>
 
 
				</article>
				<article>
 
 
				</article>
			</section>
		</section>
	</section>
	-->
 
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-28T10:36:10.418+01:00" pubdate>2013-01-28T10:36:10.418+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>
		"use strict";
 
		head( "jq", function(){ // Voir : http://headjs.com/
 
	        $( '.divID img' ).on( "click", function(){
	            var jObj = $( this );
 
	            if ( ! jObj.hasClass( "on" ) ){
	                $( this ).animate({
	                    "width" : "+=200px", 
	                    "height" : "+=200px"
	                }, 500 );
	            } else {
	                $( this ).animate({
	                    "width" : "-=200px", 
	                    "height" : "-=200px"
	                }, 500 );
	            }
 
	            jObj.toggleClass( "on" );
	        });
 
		});
	</script>
</body>
</html>

Quand on clique sur une image se trouvant à droite elle descend et s'agrandit de gauche à droite, ce qui fait un trou sans image à sa place initiale.
Je voudrais soit:
- que ce trou sois rempli par une autre image automatiquement,
- et ce serait mieux que cette image s'agrandisse de droite à gauche, qu'elle reste à sa place, et que l'image à sa gauche ( la div précedente ) se place en dessous pour laisser la place à cette div agrandie...
C'est pas simple mais j'aimerais bien y arriver.

Maintenant, je vois le "problème du trou à droite".

Proposition de solution, pas extraordinaire, mais...

Si la solution convient et si c'est nécessaire, je commenterais le code.

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( "http://danielhagnoul.developpez.com/lib/raphael-min.js", 
			{ "jq" : "http://code.jquery.com/jquery-2.0.0b1.js" },
			"http://code.jquery.com/jquery-migrate-1.0.0.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js" );
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
		aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
 
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#container {
		    position: relative;
		    margin: 0 auto;
		    margin-top:12px;
		    margin-bottom:24px;
		    width: 405px;
		    min-height:500px;
		    background-color: darkgray;
		}
		.divID {
		    position: relative;
		    display: inline-block;
		    vertical-align:top;
		}
		img {
			position: relative;
			top: 0px;
			left: 0px;
		    width: 200px;
		    height: 200px;
		    margin: 0;
		    padding: 0;
		}
		img .on { }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1302316/\
				webmasters-developpement-web/javascript/bibliotheques-frameworks/\
				jquery/changement-class-onclick/">Lien</a>
			</h2>
		</hgroup>
	</header>
 
    <div id="container">
        <div class="divID">
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/imageTest.png" alt="" >
            <img data-img-right="false" src="http://danielhagnoul.developpez.com/images/avatarDVJH.jpg" alt="" >
            <img data-img-right="true" src="http://danielhagnoul.developpez.com/images/flocon1.png" alt="" >
         </div>
    </div> 
 
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-28T10:36:10.418+01:00" pubdate>2013-01-28T10:36:10.418+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d?exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>
		"use strict";
 
		head( "jq", function(){ // Voir : http://headjs.com/
 
	        $( '.divID > img' ).on( "click", function(){
	        	var jObj = $( this ),
	        		jObjFirstImg = $( '.divID > img:first' ),
	        		boolAnimate = true,
	        		boolRight = jObj.data( "imgRight" );
 
                $( '.divID > img.on' ).each( function( i, item ){
 
                	if ( jObj[0] == item ){
                		boolAnimate = false;
                	}
 
                	$( item ).removeClass( "on" ).animate({
	                    "width" : "-=200px", 
	                    "height" : "-=200px"
	                }, 500, function(){
			        	if ( jObjFirstImg.data( "imgClone" ) == true ){
			        		jObjFirstImg.remove();
			        	}
	                });
	            });				
 
	            if ( boolAnimate ){
 
	            	if ( boolRight ){
	            		jObj.parent().prepend( jObj.clone().attr( "data-img-clone", true ) );
	            	}
 
	            	jObj.addClass( "on" ).animate({
	                    "width" : "+=200px", 
	                    "height" : "+=200px"
	                }, 500 );
		        }
	        });
 
		});
	</script>
</body>
</html>