Hover over only appears in the top left corner

I have integrated this with our site, but on the product details page, when you hover over the picture, the area which reacts to the mouse hover over command is only in the top left quarter of the image area. If I hover over the rest of the image, nothing happens.

I have it set to inside.  

Also, I am uploading several different image sizes and they do not fill up the whole image area.  Instead, the zoom browser reduces them down and they only fill about a 1/5 of the image area in the center.

I've re-installed the plug-in and now the hover over area has moved to outline the picture but the picture itself is getting reduced in size when i upload it.  How do I change the image size so it fills the display box on the product page?

Ok. I changed the "Product detail image size:" to 600 and that made the product pictures bigger. The problem now is that when the image is not 600x600 (or divisible by that), the zoom get's messed up in the display.

Do the images have to be 600x600 / 1200x1200 ..... ?   This would mean that I have to resize thousands of images for my site.

Hi Thomas,

I will try to summarize all the the questions asked in your previous posts and the options for the product picture.

1. nopCommerce has a setting (administration -> configuration -> settings -> media settings -> product detail image size) which controls to what size the pictures will be resized. The resizing works in a way that resizes the image by making the bigger dimension (height or width) to the setting set while keeps the ratio. So when you set this setting to 600 you will not have any product picture having width or height bigger than 600.

2. The Nop Cloud Zoom works in a way - when you upload a product picture that is large enough (at least 700px wide) nopCommerce displays a resized thumb version of it which is 600px wide. Then when you hover over it the Nop Cloud Zoom plugin uses the original picture(which is 700px wide) to show more detailed view of the picture.

3. The Nop Cloud Zoom has a various settings like Zoom Type. You can choose either inside or any other. If you choose any other you can modify the position of the displayed image by modifying the other settings with positive or negative numbers, like X-position, Y-position, etc. The default value for the Nop Allure Theme is "inside" .

So in order to have a decent product images, they just need to be at least 700px high or wide. The picture on the product page is centered vertically and horizontally, so it does not matter if the image is in portrait or landscape mode and the cloud zoom will work in both cases.

Hope that makes sense.

Please let us know if you have any comments or thoughts. We will be glad to discus and explain!

Best Regards!

Thanks for clearing that up. It does make sense.

I just uploaded an image that was over 1000px height and width and I am getting the error still.

Something called "mousetrap" is sizing the cloud zoom-inside box to 523 x 509.  This is preventing it from using the whole space of the product image box for the zoom.

Hi Thomas,

There should be no issues with the image zoom if the picture is 1000px wide and height. If you have a look at our demo the size of the image picture is 700 x 700 and the cloud zoom works fine. Can you send us a link to your website so that we can have a look and the Cloud Zoom settings from the administration so that we can compare them with the default ones.

Best Regards!

Upgrading to 3.3 has resolved this issue. Thanks for the help!