Relancer le script quand changement de DIV

**brisso** · 28/11/2010, 17h16

Bonjour,
j'utilise l'effet loupe de jQuery pour zoomer sur mes photos mais le problème c'est que seul la première photo fonctionne. je pense que le problème vient de l'ID de mes div qui est identique sur les deux photos. Je voudrais donc que le script démarre au mousehover et s'arrêt au mouseout pour que chauqe photo puisse bénéficier de l'effet loup.

Je ne sais pas si j'ai été très claire ds mon explication.

Les codes en question :

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="btitle">Bague argent sertie de diamants</div>
<div class="bsubtitle">35 diamants pour un total de 0,90 carat.</div>
<div class="desciption">Chaque diamant fait 0.02 carat et est fixé par 4 griffes. La monture en argent pèse 53g et est rohdié.</div>
<div class="cadrebimg"><div id="bimg"><img src="slider/3.jpg" width="400" height="200" /><div id="retina" style="background:url('slider/3.jpg') no-repeat center center white;"></div></div></div>
 
 
 
<div class="btitle">Bague argent sertie de diamants</div>
<div class="bsubtitle">35 diamants pour un total de 0,90 carat.</div>
<div class="desciption">Chaque diamant fait 0.02 carat et est fixé par 4 griffes. La monture en argent pèse 53g et est rohdié.</div>
<div class="cadrebimg"><div id="bimg "><img src="slider/1.jpg" width="400" height="200" /><div id="retina" style="background:url('slider/1.jpg') no-repeat center center white;"></div></div></div>

JAVASCRIPT

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
$(document).ready(function(){
 
	/* This code is executed on the document ready event */
 
	var left	= 0,
		top		= 0,
		sizes	= { retina: { width:190, height:190 }, webpage:{ width:400, height:200 } },
		webpage	= $('#bimg,'),
		offset	= { left: webpage.offset().left, top: webpage.offset().top },
		retina	= $('#retina');
 
	if(navigator.userAgent.indexOf('Chrome')!=-1)
	{
		/*	Applying a special chrome curosor,
			as it fails to render completely blank curosrs. */
 
		retina.addClass('chrome');
	}
 
	webpage.mousemove(function(e){
 
		left = (e.pageX-offset.left);
		top = (e.pageY-offset.top);
 
		if(retina.is(':not(:animated):hidden')){
			/* Fixes a bug where the retina div is not shown */
			webpage.trigger('mouseenter');
		}
 
		if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)
		{
			/*	If we are out of the bondaries of the
				webpage screenshot, hide the retina div */
 
			if(!retina.is(':animated')){
				webpage.trigger('mouseleave');
			}
			return false;
		}
 
		/*	Moving the retina div with the mouse
			(and scrolling the background) */
 
		retina.css({
			left				: left - sizes.retina.width/2,
			top					: top - sizes.retina.height/2,
			backgroundPosition	: '-'+(1.05*left)+'px -'+(1.05*top)+'px'
		});
 
	}).mouseleave(function(){
		retina.stop(true,true).fadeOut('fast');
	}).mouseenter(function(){
		retina.stop(true,true).fadeIn('fast');
	});
});

le lien de la page test : http://b-website.com/template/bijoux.php

Merci par avance.

**SpaceFrog** · 28/11/2010, 17h27

id = identifiant ...
il doit donc être unique sur ta page ...

vire l'id et met une classe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

class="bimg"

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

webpage	= $('.bimg')

**brisso** · 28/11/2010, 17h38

Merci pour cette réponse rapide !

Elle a d'ailleurs résolu partiellement mon problème.
Mais, elle en a créé un autre. J'ai également du changer #retina an .retina mais maintenant le zoom ce fait sur les deux images en mm temps.. et si je veux zommer sur celle du bas, tjs rien ne ce passe.

http://b-website.com/template/bijoux.php

merci

**SpaceFrog** · 28/11/2010, 18h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
webpage.each(function(){ mousemove(function(e){
...
})

heu en fait il suffit de faire jouer le niveau de parentatilé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

retina	= $('#retina');

devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).chidren('.retina')

etc ...

**brisso** · 28/11/2010, 18h15

peut être me suis-je trompé mais cela ne fonctionne pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="btitle">Bague argent sertie de diamants</div>
<div class="bsubtitle">35 diamants pour un total de 0,90 carat.</div>
<div class="desciption">Chaque diamant fait 0.02 carat et est fixé par 4 griffes. La monture en argent pèse 53g et est rohdié.</div>
<div class="cadrebimg"><div class="bimg"><img src="slider/3.jpg" width="400" height="200" /><div class="retina" style="background:url('slider/3.jpg') no-repeat center center white;"></div></div></div>
 
 
<div class="btitle">Bague argent sertie de diamants</div>
<div class="bsubtitle">35 diamants pour un total de 0,90 carat.</div>
<div class="desciption">Chaque diamant fait 0.02 carat et est fixé par 4 griffes. La monture en argent pèse 53g et est rohdié.</div>
<div class="cadrebimg"><div class="bimg "><img src="slider/1.jpg" width="400" height="200" /><div class="retina" style="background:url('slider/1.jpg') no-repeat center center white;"></div></div></div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
 
	/* This code is executed on the document ready event */
 
	var left	= 0,
		top		= 0,
		sizes	= { retina: { width:190, height:190 }, webpage:{ width:400, height:200 } },
		webpage	= $('.bimg,'),
		offset	= { left: webpage.offset().left, top: webpage.offset().top },
		retina	= $(this).chidren('.retina')

Je précise que je ne m'y connait absolument pas en javascript. Je me contente de faire de l'ingration bête.

merci

**SpaceFrog** · 28/11/2010, 18h17

enfants de ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

retina	= webpage.chidren('.retina')

**brisso** · 28/11/2010, 18h19

Dsl mais je suis pas sur d'avoir bien fait :

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
$(document).ready(function(){

	/* This code is executed on the document ready event */

	var left	= 0,
		top		= 0,
		sizes	= { retina: { width:190, height:190 }, webpage:{ width:400, height:200 } },
		webpage	= $('.bimg,'),
		offset	= { left: webpage.offset().left, top: webpage.offset().top },
		retina	= webpage.chidren('.retina')

	if(navigator.userAgent.indexOf('Chrome')!=-1)
	{
		/*	Applying a special chrome curosor,
			as it fails to render completely blank curosrs. */
			
		retina.addClass('chrome');
	}
	
	webpage.each(function(){ mousemove(function(e){

		left = (e.pageX-offset.left);
		top = (e.pageY-offset.top);

		if(retina.is(':not(:animated):hidden')){
			/* Fixes a bug where the retina div is not shown */
			webpage.trigger('mouseenter');
		}

		if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)
		{
			/*	If we are out of the bondaries of the
				webpage screenshot, hide the retina div */

			if(!retina.is(':animated')){
				webpage.trigger('mouseleave');
			}
			return false;
		}

		/*	Moving the retina div with the mouse
			(and scrolling the background) */

		retina.css({
			left				: left - sizes.retina.width/2,
			top					: top - sizes.retina.height/2,
			backgroundPosition	: '-'+(1.05*left)+'px -'+(1.05*top)+'px'
		});
		
	}).mouseleave(function(){
		retina.stop(true,true).fadeOut('fast');
	}).mouseenter(function(){
		retina.stop(true,true).fadeIn('fast');
	});
  });
});

**SpaceFrog** · 28/11/2010, 18h24

non en fait le each est une erreur ...

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
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bague argent sertie de diamants</title>
<script type='text/javascript' src='Scripts/jquery-1.4.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
 
	/* This code is executed on the document ready event */
 
	var left	= 0,
		top		= 0,
		sizes	= { retina: { width:190, height:190 }, webpage:{ width:400, height:200 } },
		webpage	= $('.bimg,'),
		offset	= { left: webpage.offset().left, top: webpage.offset().top },
		retina	= webpage.children('.retina');
 
	if(navigator.userAgent.indexOf('Chrome')!=-1)
	{
		/*	Applying a special chrome curosor,
			as it fails to render completely blank curosrs. */
 
		retina.addClass('chrome');
	}
 
	webpage.mousemove(function(e){
 
		left = (e.pageX-offset.left);
		top = (e.pageY-offset.top);
 
		if(retina.is(':not(:animated):hidden')){
			/* Fixes a bug where the retina div is not shown */
			webpage.trigger('mouseenter');
		}
 
		if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)
		{
			/*	If we are out of the bondaries of the
				webpage screenshot, hide the retina div */
 
			if(!retina.is(':animated')){
				webpage.trigger('mouseleave');
			}
			return false;
		}
 
		/*	Moving the retina div with the mouse
			(and scrolling the background) */
 
		retina.css({
			left				: left - sizes.retina.width/2,
			top					: top - sizes.retina.height/2,
			backgroundPosition	: '-'+(1.05*left)+'px -'+(1.05*top)+'px'
		});
 
	}).mouseleave(function(){
		retina.stop(true,true).fadeOut('fast');
	}).mouseenter(function(){
		retina.stop(true,true).fadeIn('fast');
	});
});
</script>
</head>
 
<body>
<div class="btitle">Bague argent sertie de diamants</div>
<div class="bsubtitle">35 diamants pour un total de 0,90 carat.</div>
<div class="desciption">Chaque diamant fait 0.02 carat et est fixé par 4 griffes. La monture en argent pèse 53g et est rohdié.</div>
<div class="cadrebimg"><div class="bimg"><img src="slider/3.jpg" width="400" height="200" /><div class="retina" style="background-image: url('unsaved:///slider/3.jpg'); background-repeat: no-repeat; background-color: white; background-attachment: scroll; background-position: center"></div></div></div>
 
 
 
<div class="btitle">Bague argent sertie de diamants</div>
<div class="bsubtitle">35 diamants pour un total de 0,90 carat.</div>
<div class="desciption">Chaque diamant fait 0.02 carat et est fixé par 4 griffes. La monture en argent pèse 53g et est rohdié.</div>
<div class="cadrebimg"><div id="class "><img src="slider/1.jpg" width="400" height="200" /><div class="retina" style="background-image: url('unsaved:///slider/1.jpg'); background-repeat: no-repeat; background-color: white; background-attachment: scroll; background-position: center"></div></div></div>
 
</body>
 
</html>

**brisso** · 28/11/2010, 18h29

Je venais d'éditer mon précédent message.

Je viens à nouveau d'essayer mais pas de changement.

**SpaceFrog** · 28/11/2010, 18h31

pas facile sans les images ...
tu peux les joindre?

**SpaceFrog** · 28/11/2010, 18h37

code précédent modifié ...
oublié de modifier les id en class:red:

**brisso** · 28/11/2010, 18h40

je vous ai mis l'essentiel des fichiers (je supprime dès que vous l'aurez pris) :

[edit]downloadé [/edit]

merci

**SpaceFrog** · 28/11/2010, 19h44

C'est bien la parentalité qui posait problème ...

D'abord pour limiter la loupe au div survolé, ensuite pour recupérer les offset

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
$(document).ready(function(){
 
	/* This code is executed on the document ready event */
 
	var left	= 0,
		top		= 0,
		sizes	= { retina: { width:190, height:190 }, webpage:{ width:400, height:200 } },
		webpage	= $('.bimg')
 
 
	if(navigator.userAgent.indexOf('Chrome')!=-1)
	{
		/*	Applying a special chrome curosor,
			as it fails to render completely blank curosrs. */
 
		webpage.children('.retina').addClass('chrome');
	}
 
	webpage.mousemove(function(e){
 
		left = (e.pageX-$(this).offset().left);
		top = (e.pageY-$(this).offset().top);
 
		if($(this).children('.retina').is(':not(:animated):hidden')){
			/* Fixes a bug where the retina div is not shown */
			$(this).trigger('mouseenter');
		}
 
		if(left<0 || top<0 || left > sizes.webpage.width || top > sizes.webpage.height)
		{
			/*	If we are out of the bondaries of the
				webpage screenshot, hide the retina div */
 
			if(!$(this).children('.retina').is(':animated')){
				$(this).trigger('mouseleave');
			}
			return false;
		}
 
		/*	Moving the retina div with the mouse
			(and scrolling the background) */
 
	$(this).children('.retina').css({
			left				: left - sizes.retina.width/2,
			top					: top - sizes.retina.height/2,
			backgroundPosition	: '-'+(1.05*left)+'px -'+(1.05*top)+'px'
		});
 
	}).mouseleave(function(){
		$(this).children('.retina').stop(true,true).fadeOut('fast');
	}).mouseenter(function(){
		$(this).children('.retina').stop(true,true).fadeIn('fast');
	});
});

**brisso** · 28/11/2010, 19h48

Génial !
Merci beaucoup c'est parfait !

Je vais maintenant essayer de comprendre...

Encore merci !

**SpaceFrog** · 28/11/2010, 19h52

ça mérite un bijou non ?

bon ben je me contenterais d'un vote

**brisso** · 28/11/2010, 20h06

On vote où ? Votre lien pour voter dans votre signature me dit que je n'ai pas accès.

Et les bijoux ne sont pas à moi...dsl

**SpaceFrog** · 28/11/2010, 20h14

le pouce up en bas des posts ...

**brisso** · 28/11/2010, 20h33

Ca y est ! Par contre au risque d'être "relou" il y a le curseur qui apparaît maintenant alors qu'au paravent il n'y était pas.

**SpaceFrog** · 29/11/2010, 08h52

relou ? non tu exprimes ton besoin ...
gère le dans le css.. cursor:none

**brisso** · 29/11/2010, 11h38

Autant pour moi. Le CSS était correct mais en local le curseur apparaissait alors qu'en ligne il n'y est plus.

Le résultat final : http://b-website.com/template/bijoux.php

Je suis ouvert aux remarques et conseils

Relancer le script quand changement de DIV

jQuery

Discussions similaires

Partager

Partager