Image Popup is too small

My solution, which I don't particularly like, is to modify the /catalog/includes/modules/pages/popup_image/jscript_main.php file and replace the i=25 for firefox with i=45 -- which then makes a window large enough for firefox 3.

I'd make the change in an override -- but to the best of my knowledge there isn't a way to override anything in modules/pages

My hope is that when that file gets overwritten when the next version is released that the issue will be fixed in the distribution code.

I went to /includes/templates/template_default/popup_image_additional/tpl_main_page

and changed the line

to

then I went to pages/product_info/jscript_main.php and changed the sizes to suit me.

you can change the sizes under jsript_main.php but it still resizes down to the zen cart default, so you have to take out resize(); the popup will then stop at the size you set it at. IN IE and Firefox.

I have found that using fual lightbox is by far the best and I am now using it for the large images and the add on installed with no problems, view it working here http://www.sacville.co.uk hope the above helps. :clap:

I used to use Lightbox on another site but I haven't tried it with zen cart. Looked a tad complicated to set up. Cornishmaid, did you know Pages 2, 3 and 4 showed up in your sitemap ? You should turn them off in the admin !

fual light box is dead easy just follow the structure, mine just worked as soon as I opened the site.

Cornishmaid:

fual light box is dead easy just follow the structure, mine just worked as soon as I opened the site.
Thanks Cornish,
This one was bugging me for a long while as well (large images not resizing correctly)
Although we didn't really want to implement the lightbox, it was the easiest way out to this problem and now that we did, we are pretty happy with it.

Cheers,
Jeroen.

Glad to have been of some help.
Best Wishes
Cornishmaid

I found I had the same (or a similar) problem with the pop-up image starting out in a small window -- only about 1 inch wide in fact. In some browsers, this appears only for a flicker, and is then replaced by a window that is large enough to hold the whole image. In Firefox, it stays small. I can see this on any ZC site that does not have a modified javascript to fix the issue.

I fixed it by using the following javascript. It's a modified version of the one in includes/modules/pages/product_info/jscript_main.php

<script language="javascript" type="text/javascript"><!--
function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=600,height=480,screenX=150,screenY=150,top=150,left=150')
}
function popupWindowPrice(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
}
//--></script>

Change the sizes (where I have 600 and 480) to suit. And you can change any other details as you prefer.

Of course, this means the window will always be that size, and won't adjust for many different sized and shaped images. But at least all your site visitors will see a large window instead of that silly little thing they may be getting now.

Rob

Hi all. I noticed this problem on my site awhile ago but only just got around to looking for a solution. I’ve tried the fixes I found here but with no luck and with so many different sized LRG images specifying a window size wouldn’t work. Adding white space to close to 700 images doesn’t appeal to me so I was wondering if anyone has come up with any ideas.
Thanks in advance for any help.

BillNally:

with so many different sized LRG images specifying a window size wouldn’t work. Adding white space to close to 700 images doesn’t appeal to me
If you have PhotoShop or comparable, you can group your images into like groups then create an "action" that you can then use to batch process images and let the computer do the work

donnbly:

My solution, which I don't particularly like, is to modify the /catalog/includes/modules/pages/popup_image/jscript_main.php file and replace the i=25 for firefox with i=45 -- which then makes a window large enough for firefox 3.

I'd make the change in an override -- but to the best of my knowledge there isn't a way to override anything in modules/pages

My hope is that when that file gets overwritten when the next version is released that the issue will be fixed in the distribution code.

Thank you.
This was the perfect solution to the URL bar taking up too much vertical space and forcing a poor image.

My suggestion in post #27 above is not necessary now that someone has properly worked out the solution. I was kind of forcing one browser to behave better, but the suggestion in post #21 above seems the best way to go for almost all browsers.

I added a bit to it, perhaps only needed by FF in Mac OS X, I'm not sure. Besides editing line 22 of includes/modules/pages/popup_image/jscript_main.php as stated, I also changed line 32 and 33 to read...

imgHeight = document.images[0].height+50-i;
imgWidth = document.images[0].width+40;

This gives a little more room, which prevents the browser from putting in scroll bars. (But Opera still blows it, which troubles me not.)

Rob

petek:

Did anyone find a definitive fix for this ? I have added some text to the bottom of an image and the text is cut out of the larger popup image. Cornishmaid's suggestion didn't work for me so I'm wondering whether anyone has found another solution. Thanks

All my pictures are cut off also, is there an option to turn fix that?

Thanks

You must make sure that the original image size you upload to zencart is sufficiently big. Since the admin only resizes images to a smaller size and does not enlarge it .
On the other hand, the picture should not be too big or your page loading time will become too long and people with slowe browsers will not be able to wait . :smile:
I usually work with images of around 1200X960 pixels with good results on my site.

Hi Stev and Shane, I have managed to change it... thank you..

In /catalog/includes/modules/pages/popup_image/jscript_main.php and /catalog/includes/modules/pages/popup_image_additional/jscript_main.php, I've changed the code to cope with images that might be bigger than the screen size. Also, tweaked the magic constant number in the imgHeight calculation from 40 to 60, and also added 'i' instead of subtracting it.

I've also changed popupWindow function in /includes/modules/pages/product_<PRODUCT_TYPE>_info/jscript_main.php to enable scrollbars=yes.

  if (document.documentElement && document.documentElement.clientWidth) {
//    frameWidth = document.documentElement.clientWidth;
//    frameHeight = document.documentElement.clientHeight;

    imgHeight = document.images[0].height+60+i;
    imgWidth = document.images[0].width+20;

    var height = screen.availHeight;
    var width = screen.availWidth;
    var leftpos = 0;
    var toppos = 0;
    if(width >= imgWidth)
    {
      leftpos = width / 2 - imgWidth / 2;
      frameWidth = imgWidth;
    }
    else
    {
      frameWidth = width;
    }
    if(height >= imgHeight)
    {
      toppos = height / 2 - imgHeight / 2;
      frameHeight = imgHeight;    
    }
    else
    {
      frameHeight = height;
    }

    window.moveTo(leftpos, toppos);

//  window.resizeTo(imgWidth, imgHeight);
    window.resizeTo(frameWidth,frameHeight);
  }

I thought I'd add a note to this thread...

The standard Zen Cart pop-up for larger images doesn't work as expected in the Safari browser on iPad. The pop-up does not appear on top of the product page; instead the product page goes away and a new page with the larger image is created. The user then has to know how to close this page and re-open the product page manually. Not good!

Since more people are beginning to use such devices, I explored how to make the user interaction better for them. I installed the latest version of Zen Lightbox and now clicking "larger image" on the product page is a much better experience for iPad users. Just as in any other browser, the larger image is drawn on top of the product page. And there's lots of settings you can make to customize the exact appearance of the image and its surroundings.

Zen Lightbox is available in the Free Software Add Ons section, link above-left on any page here.

Hope this helps someone.

Rob

I've done a bit more Googling, and found these two pages:

Finding the size of the browser window

Resize a Popup to Fit an Image's Size

I have combined the two methods to create this:

<script language="javascript" type="text/javascript"><!--
function resize() {
    imgHeight = document.images[0].height;
    imgWidth = document.images[0].width;

    var screenHeight = screen.availHeight;
    var screenWidth = screen.availWidth;

    if(screenWidth >= imgWidth && screenHeight >= imgHeight)
    {
        // image is smaller than available screen space
        var myWidth = 0, myHeight = 0, leftpos = 0, toppos = 0;
 
        // hide the scrollbars
        document.documentElement.style.overflow = "hidden";
 
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myWidth = window.innerWidth;
            myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
        }

        myWidth = imgWidth - myWidth;
        myHeight = imgHeight - myHeight;

        // resize the popup to fit the image
        window.resizeBy(myWidth, myHeight);
        
        if(screenWidth >= imgWidth)
        {
            leftpos = screenWidth / 2 - imgWidth / 2;
        }

        
        if(screenHeight >= imgHeight)
        {
            toppos = screenHeight / 2 - imgHeight / 2;
        }
        
        // move the popup to roughly the centre of the screen
        window.moveTo(leftpos, toppos);
    }
    else
    {
        // image is bigger than available screen space

        // display the scrollbars
        document.documentElement.style.overflow = "auto";
        document.body.style.marginRight='0px';

        // resize the popup to the available screen space
        window.resizeTo(screenWidth,screenHeight);
        
        // move the popup to the top left corner
        window.moveTo(0, 0);
    }

    self.focus();
}

The above code works perfectly - thank you!