Jump to content

[RESOLU] Comment modifier la taille de l'image zoomé (JQZOOM)

tlandru
 Share

Recommended Posts

tlandru Newbie

tlandru

Posted
Posted

SOLUTION :

se rendre dans /themes/votretheme/js/product.js

et remplacer xzoom et yzoom par les valeurs de votre choix.

$('img.jqzoom').jqueryzoom({
           xzoom: 600, //zooming div default width(default width value is 200)
           yzoom: 600, //zooming div default width(default height value is 200)
           offset: 21 //zooming div default offset(default offset value is 10)
           //position: "right" //zooming div position(default position value is "right")
       });




PROBLEME :

Bonjour à tous,

J'essaye de modifier les css du "module" JQZOOM qui permet de zoomer directement sur les photos, et qui positionne la photo zoomé au dessus de la case contenant le prix, taille, etc...

Les fichiers concernés sont :

- css/jqzoom.css
- js/jquery/jquery.jqzoom.js

J'essaye donc de modifier les propriétés width et height, pour avoir un zoom plus elevé que 200 par 200.

Mais bien sur, pas moyen de modifier la hauteur et largeur, on dirait que ca s'encapsule dans un autre div qui bloque tout.

Un pro du css peut tenter de modifier la chose et voir comment pouvoir modifier la largeur et hauteur de l'image se positionnant au dessus de la description ?

Merci d'avance !

Link to comment
Share on other sites
tlandru Newbie

tlandru

Posted
  • Author
Posted

Ya pas de soucis :) comme tu peux voir j'ai bien spécifié 600 et non 200

//**************************************************************
// 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: 600,        //zoomed width default width
               yzoom: 600,        //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 imageLeft = $(this).get(0).offsetLeft;
           var imageRight = $(this).get(0).offsetRight;
           var imageTop =  $(this).get(0).offsetTop;
           var imageWidth = $(this).get(0).offsetWidth;
           var imageHeight = $(this).get(0).offsetHeight;

           var bigimage = $(this).attr("alt");
               noalt = $(this).attr("alt");
               $(this).attr("alt",'');


           if($("div.zoomdiv").get().length == 0){

           $(this).after("");

           }

           if(settings.position == "right"){

           leftpos = imageLeft + imageWidth + settings.offset;

           }else{

           leftpos = imageLeft - settings.xzoom - settings.offset;

           }

           $("div.zoomdiv").css({ top: imageTop,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)/2 ;

                   $("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;

                   scrollx =    mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;

                   $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;


                   });
           },function(){
                  $(this).attr("alt",noalt);
              $("div.zoomdiv").hide();
              $(document.body).unbind("mousemove");
              $(".lenszoom").remove();
              $("div.zoomdiv").remove();
           });

       }

})(jQuery);

function MouseEvent(e) {
this.x = e.pageX
this.y = e.pageY
}



Et voici le CSS associé :

div.zoomdiv {
z-index                 : 100;
position                : absolute;
top:20px;
left:20px;
width                   : 600px;
height                  : 600px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center; 
overflow: scroll;

}


img.jqzoom{
cursor:crosshair;
position:relative;

}

Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

ok, peux tu me dire comment tu active JQzoom ?
le code qui devrait ressemble a ça :


$(document).ready(function(){
var options = {
zoomWidth: 300,
zoomHeight: 250,
xOffset: 10,
yOffset: 0,
position: "right" //and MORE OPTIONS
};
$('.MYCLASS).jqzoom(options);
});

Link to comment
Share on other sites
Gregory Roussac Newbie

Gregory Roussac

Posted
Posted

Bonjour Thomas,

Et si dans product.js tu remplaces 200 par 600 ligne 344 ?

    //set jqZoom parameters if needed
   if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
   {
       $('img.jqzoom').jqueryzoom({
           xzoom: 600, //zooming div default width(default width value is 200)
           yzoom: 600, //zooming div default width(default height value is 200)
           offset: 21 //zooming div default offset(default offset value is 10)
           //position: "right" //zooming div position(default position value is "right")
       });
   }



Cordialement

Link to comment
Share on other sites
arobase Newbie

arobase

Posted
Posted

Bonjour,

Je relance le sujet car j'ai voulu faire comme tlandru mais :

1: Je n'ai pas le même contenu dans mon product.js (v 1.2.08), j'ai donc copié-collé le code ci-dessus et depuis le zoom ne marche plus.

2: J'ai donc uploadé à nouveau mon ancien product.js mais le zoom ne marche toujours pas.


Que dois-je faire pour retrouver la fonction du zoom et pour modifier les dimensions des fenêtres zoom vu ma config ?

Link to comment
Share on other sites
  • 2 weeks later...
  • 2 months later...
  • 2 months later...
  • 1 year later...
phil3001 Newbie

phil3001

Posted
Posted

Bonsoir,

pour le trouver, il faut aller dans le dossier du nom de votre site qui est par defaut prestashop.

ensuite dans Themes puis il faut aller dans le dossier de votre template. là se trouve un dossier nommé JS

le product.js se trouve là.

prestashop/themes/themepardefaut/js/product.js

Link to comment
Share on other sites
jerome1 Newbie

jerome1

Posted
Posted

pour le fichier .js c'est bon je les mis en .txt puis en .js.

breffe ensuite j'ai modifier ses valleurs 200 par celle que je voulais en ligne 344


//set jqZoom parameters if needed
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
$('img.jqzoom').jqueryzoom({
xzoom: 200, //zooming div default width(default width value is 200)
yzoom: 200, //zooming div default width(default height value is 200)
offset: 21 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...