0

We have change order of image and description on product page.

Default RWD: description = Right Image = Left

Our theme: description = Left Image = Right

After change this all work fine except zoom. We have change image from left to right but the zoom always chow at right. We are not able to find where is the code to change that in Magento /js/varien/product.js

Any solution?

Thanks in advance!

Improve this question

2 Answers 2

Reset to default
1

That is right, there is no logic about zoom effect in the js/varien/product.js file. It is placed in the jquery.elevateZoom-3.0.8.min.js file. Please check it in the skin/frontend/rwd/default/js/lib/elevatezoom directory.

To understand this I have included the develop version of this plugin instead of minified one. Fortunately you can find it in the same folder. In the end of the developer file (the 1723 line) you can find the current plugin settings: $.fn.elevateZoom.options = { zoomActivation: "hover", // Can also be click (PLACEHOLDER FOR NEXT VERSION) ... zoomWindowPosition: 1, ... }; We interesting in the zoomWindowPosition option. It may be configured with the value from 1 to 15. How the each of the values influent the window position you can find in the setWindowPostition() method of the plugin object.

As far as I understood the best value for you is 11. The result you can on the following screenshot:

enter image description here

Improve this answer
2
  • Thanks Roman, I don't know how you have found that but it give me what i'm looking for. Another time thank you!!!
    – westh
    Commented Feb 1, 2016 at 19:59
  • thanks, this gave me the pointers I needed - although I have found the way to change things without messing with the zoom's own javascript, see below.
    – iphigenie
    Commented Feb 23, 2017 at 16:45
1

Since I found this when looking for the very same thing, here is what I have found additionally

You dont need to mess with the zoom's own javascript, the call to trigger the zoom is the skin's app.js.

I have created a copy of app.js in my theme skin, and I was able to change the position by editing that app.js

search for createZoom: in the code (around l 1161) in that function at the end you will find a line

image.elevateZoom();

parameters for the zoom as per documentation worked without a problem for me, for example

image.elevateZoom({zoomWindowPosition: 11});

If you have different layout per product type, the javascript could be extended to use different parameters.

zoom documentation http://www.elevateweb.co.uk/image-zoom/configuration http://www.elevateweb.co.uk/image-zoom/examples

Improve this answer
1
  • this way will survive upgrades, although remember to compare your app.js to the new one and migrate any changes (hasn't been any in the recent updates)
    – iphigenie
    Commented Jul 25, 2017 at 9:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.