I've had a minor problem of the popup image not centering within the popup frame on the product page when 'larger image' was clicked. Part of the image was being 'cut off' at the bottom of the popup frame. In other words, the image wasn't centering within the frame - top, bottom, left and right. I don't believe it's an issue directly related to the Cherry Zen template as it appears to be a core ZC file that needs editing.
While I'm not, at all, a programmer and don't know PHP that well I did a little experimenting and believe I've solved this issue. For those who may have this problem with this template (or any other template that displays this), here's the fix:
Open 'includes/modules/pages/popup_image/jscript_main.php'.
To adjust the popup frame height:
Go to about line 13 and find this code. The 'i=xx' of the if/else statement sets the height of the frame for various browsers. Making this height adjustment will 'center' the image vertically within the top and bottom of the frame. As I tested I just watched for somewhat even spacing between the top of the frame and image and the bottom of the frame and image (both being somewhat even). It may take several tries for each browser setting to get it right.
var i=0;
function resize() {
i=0;
// if (navigator.appName == 'Netscape') i=20;
if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
i=30; //This browser is Internet Explorer 6.x on Windows XP SP2
} else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
i=0; //This browser is Internet Explorer 6.x
} else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=44; //This browser is Firefox on Windows
} else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=45; //This browser is Mozilla on Windows
} else {
i=80; //This is all other browsers including Mozilla on Linux
}
To set the width of the popup frame go to about line 33 and look for:
imgWidth = document.images[0].width+20;
Adjust the '20' to whatever frame width you'd like that gives even and equal spacing between the edges of the image and the frame, left and right.
Another setting to adjust is at line 32 but try the above-mentioned settings first to see if that centers the image:
imgHeight = document.images[0].height+85-i;
(The default to this setting is 40)
It's important to note that ALL of my images are the same size (125x125, 220x220 and 420x420). Having irregular-sized images will have you pulling your hair out as you test/check different product images. Example: if one image is 220 px's high and another is 190 px's high....
I tested using various browsers and setting each to look symetrically even for both width and height. This will probably work for any template having this problem.
Hope this helps a few folks...
