[SOLVED] Can the picture in JQZoom be enlarge?

[firescorpz]

Hi,

Need advise.

Can the picture in JQZoom be enlarge? If that is possible, how do I do it?
Can anyone get me a set by set guide as I am not a expert in web design

Thank you in advance.

[rocky]

Modify css/jqzoom.css in the root directory of Prestashop. You can change "width" and "height" of the JQZoom popup. You can use "top" and "left" to adjust the position of the popup.

[firescorpz]

Hi Rocky

Wow you again.
You are a expert in prestashop...

is there any guide which i can download here
that teach every function in prestashop?

Anyway I will try it to see if it works. Thank for
your help again.

[firescorpz]

Very very sorry again, as I am no good at web design, how do i go to the root directory to find
css/iqzoom.css?

[Dharani]

Path to go
prestashop->css->jqzoom.css

[rocky]

There is a nice guide that covers how to use the Back Office here. I'm not aware of any guide to all the files and PHP functions in Prestashop though.

[firescorpz]

Hi, thank you guys for helping..

[uddhava]

@ Rocky.

your anwser / fix does not work anymore, at least not in 1.3.0.3...
You have to edit the product.js file in your theme directory.
>themes>your theme>js>product.js.

There you can find the jqzoom function (line 344 in 1.3.0.3) and change the default settings.
It will override the settings in the css>jqzoom.css file.
See the code here
You should change values in file /themes//js/product.js
line 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")
 });
}

Change xzoom and yzoom values…

[rocky]

Thanks for the update. I guess the Prestashop team moved the code into the theme. That's a good idea, since it lets you specify different jqZoom settings for each theme.

[justinl]

Anyone who wants to update or know more regarding the settings of jqZoom or jqZoom Evolution (updated version) can find them here: http://www.mind-projects.it/projects/jqzoom/

[philee]

Wow, I like the new JqZoom Evolution. Has the highlighted box, more detailed. Will we see this in the newer PS?

[RickieSee]

I like that zoom effect, kinda. Where is the [free]download for Prestashop please? Or is this something I'll have to hardcode in?

 

Thanks

[philee]

Rickie,

 

The download is listed above in Justin's post. However, you require to do some modification to your files. Which I don't want to touch unless I get a developer or a walk-through tutorial to do.

[RickieSee]

Can we please give a single post with a walkthrough. It's kinda confusing having to go through the various posts etc?

 

That would be awesome And i'm sure there'd be a hell of a lot of really grateful people out there!

[justinl]

Hey RickieSee,

 

What in particular are you wanting to know that wasn't covered in this thread or remains confusing? (I thought uddhava gave a pretty good explanation of how to configure the jqzoom script).

 

Cheers,

Justin

[RickieSee]

Hi Justin,Ignore me. Just being stupid and lazy. *Slaps head*

 

For example I want to make my Product image have JQZoom:

 

I do the following:

 

Link the jquery scripts, edit product.tpl > add the anchor to the relevant image tag.

 

How would the site differentiate between the big and small image though....the src of the anchor would be:

 

src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}"

 

is that correct?

 

 

Thanks

[justinl]

Hey RickieSee,

 

What version of Prestashop are you using? I'm not sure when JQZoom was introduced into Prestashop, but if you go into the Back Office into Preferences > Products, there is an "Enable JQZoom" option that can be enabled and will automatically turn jqzoom on for all of your products.

 

Then to configure the jqzoom window (size, positioning, etc.), follow Uddhava's instructions posted above

 

Let me know if I totally misunderstood your question

 

Cheers,

Justin

[RickieSee]

Oops, I didn't know that. Hahah, I was going to program one in! LOL Thanks.

 

How do I change the position to show on the left? (on product.js)

 

R

[RickieSee]

I should note typing "Left" as the position value doesn't work.

[justinl]

Hey RickieSee,

 

If the position value isn't working for you (it doesn't appear to work as advertised for me either), then use the offset value and make it negative. The offset value offsets that magnification window by X pixels to the right if you use positive values, but if you use negative values, it pushes that window to the left. So you'll want to use some large negative number that is at least the width of your magnification window (xzoom value) plus the width of your large image. So something like -900 for the offset attribute might be what you're looking for.

 

Justin

 

ps - make sure "position" is set back to the default "right" value.

[RickieSee]

Thanks Justin

[Kanary]

Dear experts,

 

the latest JQZoom now is 2.3 while the one that comes with prestashop is very old.

 

I've downloaded the latest version files from JQZoom.

 

But how can I update my prestashop to enable the latest Zoom version?

 

Waiting your expert help.

thanks.

[justinl]

Hey Kanary,

 

I haven't personally updated it but this is how I'd start the process: (btw, I had PM'd these instructions to another member a few weeks ago and they said that it did not work for them. However I thought that this might help give you a starting point to work from.)

 

1. Download the new jqzoom

 

2. Extrace the jquery.jqzoom-core.js file from the downloaded .zip archive and rename it to jquery.jqzoom.js.

 

3. Replace js/jquery/jquery.jqzoom.js with the new file you just downloaded and renamed (I think replacing the file is not the best way to do it, but unless you want to start messing with js includes in the php files, then replacing it might be the easiest route to go)

 

4. In your product.js file, change this block of code:

 

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

.../*variables placed in here*/

});

 

to this:

 

 

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

../*variables placed in here*/

});

 

Some of the variable names are not the same in the new version so you will have to look at the new API documentation to see what the new variables are called. I know xzoom and yzoom are now called something different.

 

You'll have to do some more work to get it working from the sounds of that other members experience, but I'm not implementing it myself so this is about as much advice as I can give right now.

 

Cheers,

Justin

[philee]

Yeah, give it a try Kanary.

 

I tired to implement the update to my site, but no luck. I get the crosshair, but no jQzoom feature.