jqZoom not working correctly.

[sarah3585]

Hi, When using Zjoom it does not move the image inside the box, I alway just get the bottom right hand corner. When swapping the theme back to the original prestashop theme it works fine. I have tried copying the products.tpl code from the prestashop theme to my custom theme but that doesn't work. I've checked that all the js and css files are in place.

Any suggestions?
Thank you.

[razaro]

Some free themes don't have code for jqzoom and I suspect that you are missing
some code from product.js in your theme js folder or some code in product.tpl.

In product.js code is

    //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")
       });
   }

You can see that in default theme product.js file.

And in product.tpl you need this line at top

var jqZoomEnabled = {if $jqZoomEnabled}true{else}false{/if};

and this one too

{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"

[sarah3585]

Thanks for the reply. The theme was created by myself using the standard prestashop so all code is the same for products.tpl and all js and css is there.

[razaro]

Can you post link to your website or it is on local server ?

Check if there is any js error that maybe cause problems for jqzoom.

[Xperos]

I had a similar problem where the zoomed image could not be fully scrolled. This was caused by the page being offset from the top of the window by a fixed div and also the use of auto margins to centralize the web page.

My solution was to modify jquery.jqzoom.js to be:

//**************************************************************
// 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]
//**************************************************************
// Hacked by Xperos 30/12/2010
// Modified take account of images that are offset from the absolute co-ordinates
//**************************************************************
(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 imageLeft = $(this).get(0).offsetLeft;
               var imageTop =  $(this).get(0).offsetTop;
               // Xperos Hack
               var imageAbsLeft = $(this).offset().left; 
               var imageAbsTop = $(this).offset().top;
               // Xperos Hack End
               var imageWidth = $(this).get(0).offsetWidth;
               var imageHeight = $(this).get(0).offsetHeight;

               noalt = $(this).attr("alt");
               var bigimage = noalt;
               $(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);

                   // Xperos Hack
                   scrolly = mouse.y - imageAbsTop - ($("div.zoomdiv").height()*1/scaley)/2;
                   $("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;
                   scrollx = mouse.x - imageAbsLeft - ($("div.zoomdiv").width()*1/scalex)/2;
                   $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;
                   // Xperos Hack End
               });
           }, 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
}

[S7 Media Ltd]

That my friend is brilliant. Thankyou Xperos

[pierrot10]

Hello Xperos

Thank for this solution, it helped me a lot, but I did not understand why. Could you explain me again?

Thanks

[samuelprabhu]

Jqzoom not working properly ,

Zoom div coming below the product description area

 

[shrinidhim]

thank you 'Xperos'.. its working..

--

replaced file:  js/jquery/plugins/jqzoom/jquery.jqzoom.js

with Xperos given code..