[SOLVED]JqZoom first hover

[R.Kinkeris]

Hello,

My problem is that on first hover on JqZoom doesn't work like it should. On first hover it doesn't fetch the src and the JqZoom image doesn't load. Anyone know how can it be fixed?

 

Thanks in advance.

Edited April 9, 2013 by R.Kinkeris (see edit history)

[vekia]

You use default template? Which version of PS ? Your store is online now? If so, can you provide an URL ? it is hard to say what exactly goes wrong without an access to store (it is js/css issue)

[R.Kinkeris]

At the moment I can't give access to store.

PS version is 1.5.4 and I don't use default template.

 

 

I noticed that it happens only when loading the page my cursor is over the image. If I load the page and cursor isn't over the image, everything works like it has to.

 

Problem is solved. It was something in product.js. I just copied everything from default theme and it works correctly now.

[vekia]

thanks for sharing your solution, so the problem is now solved :-) thanks

[R.Kinkeris]

Not a very good solution, but at least it works

[BreizhInWeb]

For my part I just copy the default theme products.js of nickel and walking

[bruce-rez]

Hi,

I have almost similar problem with jqZoom.

In my case when my product has more than 1 image, it works like this product:

http://newstarfabric...shed-viole.html

 

When the product has only one image, it's not working, like this product:

http://newstarfabric...n/29-viole.html

 

Weird. Has anyone else experienced this problem before?

Thank you.

[R.Kinkeris]

For me everything is working fine on your both examples. Could you describe what exactly isn't working for you?

[vekia]

i checked your website bruce-rez and everything works fine there

problem solved?

[bruce-rez]

R.Kinkeris, vekia,

In my case, the problem is when I hover on the image and move the mouse over the image It does not show the detail when there is only one product's image.When I move the mouse over the image it shows the entire image without seeing the details.

 

Here is the example that jqZoom is not working correctly (Product with only one image)

Please see the example and move the mouse over the image:

http://newstarfabrics.com/en/chiffon/29-viole.html

 

Here is the example that jqZoom works correctly (Product with tow images)

You should hover first on the small thumbnails back and fort and then hover on the image to see the jqZoom and you will see the details of the images which is good:

http://newstarfabrics.com/en/chiffon/30-crushed-viole.html

 

As I said in my previous post when there are more than one image in the product the jqZoom works correctly. When there is only one image in the product the jqZoom is not working correctly and when we hover over the image, it does not show the detail of the image.

I precise all images in both below scenario are formatted at 600x600.

[R.Kinkeris]

Your problem is that first time you hover over the image the jqZoom loads the wrong image.

 

<img class="bigimg" src="http://newstarfabrics.com/54-large_default/viole.jpg">

which naturally is 266x266px instead of

<img class="bigimg" src="http://newstarfabrics.com/54-thickbox_default/viole.jpg">

which is 600x600.

Can't tell you anything else because I'm not so good at these things. Try searching in jqZoom.js or the tpl file for the problem. If you're not using original theme files, try to use the original ones.

[yaniv14]

Try disabling all CCC (BO -> Advanced parameters -> Performace) & clear smarty cache, just to see if it helps.

[bruce-rez]

R.Kinkeris,

I use the default theme 1.5.4.1. I need to know exactly what file should I look at and what to modify.

Thank you anyway.

 

yaniv14,

I disabled all CCC and Cache in the BO but it did not resolve the problem.

Thank you

[yaniv14]

Can you try copy over 'js/jquery/plugins/jqzoom/jquery.jqzoom.js' from 1.5.4 to your 1.5.4.1 shop (to the same folders of course)

[bruce-rez]

yaniv14,

I checked in default_gird theme (my theme) and the file 'js/jquery/plugins/jqzoom/jquery.jqzoom.js' does not exist.

In my js folder (in my theme) the folder jquery does not exist.

I am attaching a screen shot of my theme files.

Thank you

[yaniv14]

js in root not in themes

[bruce-rez]

Ok, I will copy the jquery.jqzoom.js from the root folder and then my question is:

Where exactly should I paste the (jquery.jqzoom.js)? What would be the complete path in my theme?

Since I do not have the same JS files managemnet in my default_grid theme, do I need to create the missing folders ( /jquery/plugins/ ) in there?

Thank you

[yaniv14]

just put it in the same location where you take it from.

 

root - js/jquery/plugins/jqzoom

[bruce-rez]

yaniv14,

I don't have the version 1.5.4.

The only version I have is the version 1.5.4.1 which is my current website.

I looked at the Prestashop website, the only version available is version 1.5.4.1 ( not version 1.5.4).

[yaniv14]

just paste this inside your existing file

 

//**************************************************************

// 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;

 

noalt = $(this).attr("alt");

var bigimage = noalt;

$(this).attr("alt", '');

 

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)/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

}

[bruce-rez]

I did paste the codes but I get a blank zooming.

Please see the screen shot.

[bruce-rez]

Any progress or idea at this issue?

I am still waiting for any help or workaround.

Thank you

[yaniv14]

Can you disable CCC for JS so I can check which version loads in your site

[bruce-rez]

Hi yaniv,

I disabled the CCC for JS.

Please see the screen shot to make sure if I did write.

Here is the link: http://newstarfabrics.com/en/

Edited June 2, 2013 by bruce-rez (see edit history)

[yaniv14]

your site still load the 1.5.4.1 jqzoom file so please download this file,

and place the file in your root not themes folder under 'js/jquery/plugins/jqzoom/'

and check if its working, try also hard refresh in your browser to make sure the browser is getting the file again from the server and not from cache.

 

let me know

[bruce-rez]

yaniv,

It's not working and the zooming image is not showing.

I downloaded your file and pasted in the root folder under 'js/jquery/plugins/jqzoom/' and uploaded again in the same folder and I also cleared browser cash without any positive result.

Link: http://newstarfabrics.com/en/

[yaniv14]

Can you disable again CCC for JS, I want to make sure you are loading the file I gave you and not the previous one.

[bruce-rez]

Hi yaniv,

I disabled the CCC for JS.

[yaniv14]

Hmmmm...... I can see its loading the new file but now working at all, console show 404 on image.

reverse back to your previous file that at least showed the image when hover, and meanwhile i will try to check it.

For now keep all CCC as normal (that way is easier to inspect your site).

 

Also maybe you want to open a new topic so other members can help, because not allot of members will open a topic that says SOLVED on the title.

Edited June 3, 2013 by yaniv14 (see edit history)

[bruce-rez]

yaniv,

Thanks for your support. I will definitely open a new topic.

[dimo.petrof]

Your problem is that first time you hover over the image the jqZoom loads the wrong image.

which naturally is 266x266px instead of

which is 600x600. Can't tell you anything else because I'm not so good at these things. Try searching in jqZoom.js or the tpl file for the problem. If you're not using original theme files, try to use the original ones.

 

I have the very same problem. I've replaced both products.tpl and jqzoom.js files and it doesn't work. Do you know which file sets which picture is used first in the product page ?

[bruce-rez]

dimo.petrof,

Since this topic is labled Solved, so there is less chance to get an answer or solution.

I opened a new topic about the same subject, if you want you can joint there.

Here is the link to the topic:

http://www.prestashop.com/forums/topic/252012-jqzoom-first-hover-is-not-working-on-v1541/page__p__1253829?do=findComment&comment=1253829

[joaomag]

Hi guys,

 

I need your help... after import all the photos of my products, in the proudct page, tht tickbox and the zoom just stop working .. anyone can give me a hand ?

 

http://cadeiras.formadivina.com.br/

 

Thx in advance.

[R.Kinkeris]

Hi joaomag,

Can you give me a link and explain where exactly the tickbox should be located in your page?