Bonjour,
Je viens vers vous car j'ai cherché, en vain sur ce forum ou à l'aide de notre ami à tous mais rien trouvé.
J'aimerais pour une boutique prestashop activer le jqzoom au clic et non au hover sur le produit.
j'ai testé différentes choses genre :
(function($) {
$.fn.jqueryzoom = function(options) {
var settings = {
xzoom: 200, //zoomed width default width
yzoom: 200, //zoomed div default width
offset: 10, //zoomed div default offset
position: "right" //zoomed div default position,offset position is to the right of the image
};
if(options)
$.extend(settings, options);
var noalt ='';
$(this).hover(function() {
var imageRelativeLeft = $(this).get(0).offsetLeft;
var imageLeft = $($(this).get(0)).offset().left;
var imageRelativeTop = $(this).get(0).offsetTop;
var imageTop = $($(this).get(0)).offset().top;
var imageWidth = $(this).get(0).offsetWidth;
var imageHeight = $(this).get(0).offsetHeight;
attr = typeof($(this).attr("rel")) != 'undefined' ? "rel" : "alt";
noalt = $(this).attr(attr);
var bigimage = noalt;
$(this).attr(attr, '');
if($("div.zoomdiv").get().length == 0)
$(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");
if(settings.position == "right")
leftpos = imageRelativeLeft + imageWidth + settings.offset;
else
leftpos = imageRelativeLeft - settings.xzoom - settings.offset;
$("div.zoomdiv").css({top: imageRelativeTop,left: leftpos});
$("div.zoomdiv").width(settings.xzoom);
$("div.zoomdiv").height(settings.yzoom);
$("div.zoomdiv").show();
$(document.body).mousemove(function(e) {
var bigwidth = $(".bigimg").get(0).offsetWidth;
var bigheight = $(".bigimg").get(0).offsetHeight;
var scaley ='x';
var scalex= 'y';
if(isNaN(scalex)|isNaN(scaley)) {
var scalex = Math.round(bigwidth/imageWidth) ;
var scaley = Math.round(bigheight/imageHeight);
}
mouse = new MouseEvent(e);
scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/3 ;
$("div.zoomdiv").get(0).scrollTop = scrolly * scaley ;
scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/3 ;
$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;
});
}, function() {
$(this).attr(attr, noalt);
$("div.zoomdiv").hide();
$(document.body).unbind("mousemove");
$(".lenszoom").remove();
$("div.zoomdiv").remove();
});
}
dans le fichier jqzoom.js j'ai changer le mot hover ligne 12 par clic mais ça désactive tout.
Bref avez vous une solution ou un début de piste s'il vous plait?
D'avance merci !