activer jQzoom au clic

[Lotfi69]

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 26 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 !

[Lotfi69]

concrètement j'aimerais avoir ce rendu la -> http://www.upcouture.com/e-shop#.UfUuxY3IayQ

Pour le moment prestashop n'offre pas cette effet au clic mais au hover...

[Lotfi69]

Après avoir cherché et cherché encore je vous laisse la réponse que j'ai trouvé et qui me convient largement :

Dans le fichier jquery.jqzoom.js

situé dans le fichier js/jquery/plugins/jqzoom/

Copier coller ceci à la place de votre fichier, dans l'hypothèse ou vous n'avez jamais modifier ce fichier avant. (n'oubliez pas de faire un backup avant , on est jamais trop prudent.) :

//**************************************************************
// jQZoom allows you to realize a small magnifier window,close
// to the image or images on your web page easily.
//
// jqZoom version 1.2
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)
// Released on Dec 05 2007
// i'm searching for a job,pick me up!!!
// mail: [email protected]
//**************************************************************
(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);
function MouseEvent(e) {
this.x = e.pageX
this.y = e.pageY
}

En espérant que ça vous aide !

 

Dans le pire des cas n'hésitez pas à me contacter soit ici en mp, soit à [email protected]