Relancer le script quand changement de DIV
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:
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:
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.
