Jump to content

JqZoom Box Size?

BadgerDog
 Share

Recommended Posts

BadgerDog Newbie

BadgerDog

Posted
Posted

Under the option "Enable JqZoom instead of Thickbox on product page", is there a way to make the displayed zoomed box size that you can move around within, bigger than the default?

 

... and is there a way to control where that zoomed box appears on the screen?

 

Thanks ... :)

 

Regards,

Doug

Link to comment
Share on other sites
cedricfontaine Newbie

cedricfontaine

Posted
Posted

You can change the settings in /js/product.js.

 

$('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 find the parameter here http://www.mind-projects.it/projects/jqzoom/

  • Like 9
Link to comment
Share on other sites
  • 3 months later...
Andrés Díaz Newbie

Andrés Díaz

Posted
Posted

You can change the settings in /js/product.js.

 

$('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 find the parameter here http://www.mind-proj...rojects/jqzoom/

 

Thank you, very helpful!

Link to comment
Share on other sites
  • 1 month later...
reSabian Newbie

reSabian

Posted
Posted

You can change the settings in /js/product.js.

 

$('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 find the parameter here http://www.mind-proj...rojects/jqzoom/

 

Thanks a lot, really helpful! :D

Link to comment
Share on other sites
  • 4 weeks later...
  • 1 month later...
  • 1 month later...
felipeN Newbie

felipeN

Posted
Posted (edited)

Hi,

i'd like to know the options allowed to this pluggin. Because i'm trying to apply the option of innerzoom that i find in the documentation of github but i can't do it. I used:

 

 

$('img.jqzoom').jqueryzoom({

zoomType: 'innerzoom',

});

 

But allways its the same small window. Even if i delete all the options nothing change. There is any place more where i should change the parameters?

 

 

Anyone?

 

 

Ok, i get it. Just upgrade the js.

Edited by matilda (see edit history)
Link to comment
Share on other sites
  • 2 months later...
  • 2 weeks later...
  • 3 weeks later...
-FrA- Newbie

-FrA-

Posted
Posted

Hi, I've tried the steps but the size of the zoomed image doesn't change. I've change the values in JS as well as in CSS.

Do you have any cache either in Prestashop or in your browser ? Did you try to remove the cache ?

 

Same problem. Same steps and cleaned cache. Can't understand...

Link to comment
Share on other sites
  • 1 month later...
Kogkalidis Collaborator

Kogkalidis

Posted
Posted

Thank you, very helpful!

Thanks a lot, really helpful! :D

 

Guys, it's far better to push the "like" button on the response of the guy. Because if anyone posts "Thanx" then the thread will be huge and not helpful, cause some guy that has the same problem wants to browse on a few responses and solve it asap.. Moreover this way you raise the reputation of that user..

 

Take care,

Kinezos Emporos

  • Like 2
Link to comment
Share on other sites
  • 4 weeks later...
maptist Newbie

maptist

Posted
Posted

I have some problem with this setting, because when I changed size of image to 400x400px the zoom is not centered as you see below. How to fix it?

 

6mHhv5R.png

 

I have the same issue with 1.5.3.1 and default theme. I would be very thankful for any help :)

Link to comment
Share on other sites
maptist Newbie

maptist

Posted
Posted (edited)

SOLVED:

 

Line 64-67 prestashop/js/jquery/plugins/jqzoom/jquery.jqzoom.css

 

 scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/4 ;
 $("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;
 scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/4 ;
 $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;

 

at the end change the scaley and scalex ratio from 2 to 4.

Edited by maptist (see edit history)
  • Like 2
Link to comment
Share on other sites
  • 5 weeks later...
Kogkalidis Collaborator

Kogkalidis

Posted
Posted

SOLVED:

 

Line 64-67 prestashop/js/jquery/plugins/jqzoom/jquery.jqzoom.css

 

 scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/4 ;
 $("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;
 scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/4 ;
 $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;

 

at the end change the scaley and scalex ratio from 2 to 4.

 

Works also for me.. Version 1.5.2

Link to comment
Share on other sites
  • 2 weeks later...
  • 3 weeks later...
ali3412 Newbie

ali3412

Posted
Posted (edited)

Prestashop 1.5.4

 

themes/***/js/product.js

 $('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)

 

js/jquery/plugins/jqzoom/jquery.jqzoom.css

width				   : 200px;
height				  : 200px;

 

js/jquery/plugins/jqzoom/jquery.jqzoom.js

   xzoom: 200,   //zoomed width default width
   yzoom: 200,   //zoomed div default width

Edited by ali3412 (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 1 month later...
cessargor Newbie

cessargor

Posted
Posted

First, go to your prestashop/css/jqzoom.css ( or /public_html/js/jquery/plugins/jqzoom in 1.5) file. change the width and height values from the code below:

div.zoomdiv {

z-index : 100;

position : absolute;

top:0px;

left:0px;

width : 200px;<- change this

height : 600px;<- change this

background: #ffffff;

border:1px solid #CCCCCC;

display:none;

text-align: center;

overflow: hidden;

After that, go to themes/yourtheme/js/product.js

//set jqZoom parameters if needed

if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)

{

$('img.jqzoom').jqueryzoom({

xzoom: 200,<- change this

yzoom: 200,<- change this

offset: 10 //zooming div default offset(default offset value is 10)

//position: "right" //zooming div position(default position value is "right")

});

}

Dont forget to backup your original files before make changes. If you couldnt see the different after you make changes, try different browser.

Link to comment
Share on other sites
  • 4 weeks later...
  • 2 months later...
jeyjoo Newbie

jeyjoo

Posted
Posted

Anyone still having issues  with this, I figured out a solution.

 

  1. First set your thickbox image size to something large such as 1200px. You do this via PS back office - preferences/images. This will make both the jzoom and the product image look huge
  2. You may now need to regenerate image thumbs in preferences/images to avoid stretched looking images.
  3. Now via css alter the size of the image display on your product page. Something #bigpic {height:400px;width:400px;} may be enough.

Thats it. Not sure if jzoom to be used that way and poorly explained. Hope this helps

Link to comment
Share on other sites
  • 3 weeks later...
  • 1 month later...

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...