Fonction zoom et changement d'image

[albedo0]

Bonjour à tous,

J'ai envie de faire un site avec la possibilité de zoomer sur les images... Le zoom se présente sous la forme d'une loupe grâce au script suivant :

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
/* 
http://www.dailycoding.com/
Rewritten by Andreas Voigt - http://voigt.se/sandbox/imageLens/demo3.html
*/
(function ($) {
$.fn.imageLens = function (options) {
var defaults = {
lensSize: 100,
borderSize: 1,
borderColor: "#775113"
};
options = $.extend(defaults, options);
var lensRadius = options.lensSize / 2 + options.borderSize,
br = "border-radius:",
lensStyle = "width:" + options.lensSize + "px;height:" + options.lensSize + "px;display: none;"
+ "-moz-" + br + lensRadius + "px;" // <FF4
+ "-webkit-" + br + lensRadius + "px;" // Older webkit versions
+ br + lensRadius + "px;"
+ "border:" + options.borderSize + "px solid " + options.borderColor + ";"
+ "background-repeat:no-repeat;position:absolute;z-index:9999";
return this.each(function () {
var img = $(this).wrap("<span></span>"),
width = img.width(),
height = img.height(),
setPosition = function ( e ) {
var offset = img.offset(),
x = (e.pageX - offset.left),
y = (e.pageY - offset.top),
m = 'px ',
bgLeftPos = -(x * widthRatio - lRadius),
bgTopPos = -(y * heightRatio - lRadius);
lens.css({
left: x - lRadius,
top: y - lRadius,
backgroundPosition: bgLeftPos + m + bgTopPos + m,
cursor: 'none',
display: x < 0 || y < 0 || x > width || y > height ? 'none' : ''
});
},
parent = img.parent().css({position:"relative",display: "inline-block", width: width,height: height}).mousemove(setPosition),
imageSrc = options.imageSrc || $(this).attr("src"),
bigImg = new Image(),
lens = $('<div style="' + lensStyle + '">&nbsp;</div>').appendTo(parent).addClass(options.lensCss).css({ backgroundImage: "url('" + imageSrc + "')" }),
widthRatio, heightRatio,
lRadius = options.lensSize / 2; //Lens Radius
bigImg.onload = function() {
widthRatio = this.width / width;
heightRatio = this.height / height;
};
bigImg.src = imageSrc;
});
};
})(jQuery);

Tout marche très bien... mais j'ai par la suite souhaité pouvoir changer l'image.

Code :

1
2
3
function switchImage( obj ) {
	$('image').src = obj.href;
}

L'image se charge très bien... malheureusement l'image du zoom n'est pas changée ! Ce qui est normal vous allez me dire...

J'ai donc besoin de recharger la lentille avec al nouvelle image, ce que je fait en modifiant ma fonction sous la forme suivante :

Code :

1
2
3
4
5
6
7
8
function switchImage( obj ) {
	$('image').src = obj.href; 
 
 
	jQuery(document).ready(function($) {
		$("#image").imageLens();
	});	
}

Mais forcément, ça marche... presque... vu que je me retrouve avec un nouveau zoom avec la bonne image, mais le premier zoom existe encore ! Je cherche donc à supprimer le premier zoom avant de créer le second...

Si une âme charitable pouvait me venir en aide ce serait super sympa !

Merci d'avance !

[albedo0]

Une autre piste serait de changer l'image utilisée en background pour le zoom...

J'ai donc ajouté un id="zoom" sur la lentille... mais là je ne sais plus faire...

J'ai juste essayé un truc du genre :

Code :

1
2
3
4
5
6
function switchImage( obj ) {
	$('image').src = obj.href; 
 
	$("#zoom").css( "backgroundImage" , "url('image.png')") ;
 
}

Le code PHP pour l'affichage du lien sur lequel on clique est le suivant :

Code :

1
2
3
4
5
6
7
8
        <li>
            <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" 
               title="<?php echo $_product->getName();?>" 
               onclick="javascript:switchImage( this ) ; return false;" class="imgchange"> 
	            <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(66); ?>" 
	                 width="66" height="66" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
            </a>
        </li>