Discussion :

[brisso]

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]

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]

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]

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]

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]

enfants de ...

Code :

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

retina	= webpage.chidren('.retina')