View Larger Image Aspect Ratio not preserved

[lynbor]

Just a quick update.

I tried all the various suggestions with regard to setting height and width and max-height and max-width without success. I know I had the correct CSS file and location because I could cause changes, just not to the window being generated. The image is actually displaying full size and being squeezed by the window size because of the recursive nature of the template. I actually looked at the source of the popup window and the HTML looks good and includes the image dimentions in the <IMG> tag.

The metatag for viewport looks correct to me as well. So it comes down to the code that is creating the popup WINDOW and not any of the HTML in the window itself. And it's likely not that the code is wrong but more that it's too simple. It needs to detect the size of the content and then resize itself to fit provided that size is within the size of the screen it's displaying within. And I don't see anywhere that is happening.

I found a good site online for doing all this stuff. (I think) Click Here to see

but I have no clue how to incorporate something like this into this ZC template let alone where. And maybe I'm barking up the wrong tree, this is my educated guess as to what is wrong.

[mc12345678]

Are you wanting the images to be arbitrarily resized or large? I ask because when I navigate the site and click on the images, the images appear in a popup with the popup sized to the image size. If I try to retrieve the image directly with the browser it shows as the same size as what is given in the popup. So, personally I'm confused about what is going on at the moment that is to be changed.

If your images are still showing "oddly" shaped, perhaps want to clear the cache/cookies for the site to get a fresh perspective?

[davewest]

The fix is simply to set the width/height size larger then you would ever need and let the resize script do its job...

in includes/modules/pages/product_info/jscript_main.php

find and change in red was 100 to 1000

function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=1000,height=1000,screenX=150,screenY=150,top=150,left=150')
}

The resize script well decrees the window to the image true size based on the screen size and so on... basically the same thing I do in colorbox..

tested with ZC156a responsive classic template with the added img css for max-width set to 100%

[lynbor]

The fix is simply to set the width/height size larger then you would ever need and let the resize script do its job...

in includes/modules/pages/product_info/jscript_main.php

find and change in red was 100 to 1000

function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=1000,height=1000,screenX=150,screenY=150,top=150,left=150')
}

The resize script well decrees the window to the image true size based on the screen size and so on... basically the same thing I do in colorbox..

tested with ZC156a responsive classic template with the added img css for max-width set to 100%

There we go! Ding Ding Ding, we have a winner!
It actually worked better just changing the width to 1000 and leaving the height at 100. So for some strange reason, the resize was not doing it's job entirely when they were both set to 100. The width was not resizing for some strange reason. The height was sizing to the image size but with the width at 100, the image and window become distorted. Now it pops a wide thin window for a second and then it resizes and centers with the large version of the product image as it should