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 !

2 réponses


2b3ez
Réponse acceptée

C'est normal puisque la fonction hover utilisée ici est du type :

$(this).hover(function(){},function(){});

première fonction pour l'état survol, deuxième fonction lorsque l'élément n'est plus survolé.

pour remplacer ta fonction par la fonction click et non clic, tu peux essayer un truc du genre :

$(this).click(function(){
    $(this).toggle(function(showOrHide){
    if ($(this).is(':visible')){
            // état survol
        }else{
            // état non survolé
        }
    });
});

à tester

Lotfi Berrahal
Auteur
Réponse acceptée

Un grand merci car après avoir lu ce que tu m'a écris j'ai regardé autrement ce fout*** code et j'y suis arrivé ! :)

Je poste la solution pour ce que ça peut aider dans le futur ! :)

(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;
                $(this).click(function(){
                $("div.zoomdiv").css({top: imageRelativeTop,left: leftpos});
                $("img.jqzoom").css('cursor','crosshair');
                $("div.zoomdiv").width(settings.xzoom);
                $("div.zoomdiv").height(settings.yzoom);
                $("div.zoomdiv").fadeIn('slow');
                });
                $(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);
                $("img.jqzoom").css('cursor','pointer');
                $("div.zoomdiv").fadeOut('slow');
                $(document.body).unbind("mousemove");
                $(".lenszoom").remove();
                $("div.zoomdiv").remove();
            });
        }
})(jQuery);

Merci encore