large image popup size and cutting image

Hi

I am having some trouble with the large image popup.

On the template I am working on the popup opens at the small image size, and I need to enlarge the popup to see the image at the larger size.

On the classic it opens almost correctly at the large size, saying almost as it cuts off few pixel from the bottom of the image, and here to I can enlarge the popup to see the whole image.

I tried editing the modules/pages/product_info/jscript_main.php setting the width and height at slightly higher value, and while it fixes the new template issue, it keep cutting off the bottom on both classic, and new template.

Sorry I can't give a link as it's on a local environment, but if it can help, I'll set up a live one.

Thank you.

On the template I am working on the popup opens at the small image size
On the classic it opens almost correctly at the large size
I tried editing the modules/pages/product_info/jscript_main.php
The above file would be the same for both templates
What file(s) are different for your template that you are working on?

Thank you

The relevant file is
templates/CUSTOM/templates/tpl_product_info_display.php
I have not touched the block conatining "<!--bof Main Product Image--> [code] <!--eof Main Product Image-->", and
tpl_modules_main_product_image.php
is not customized, hence it's the default one.

Of course there are many other files, in case you think of some that might be relevant please let me know, and I'll check if it's been modified.

is not customized, hence it's the default one
Is there a file for the above in your template structure or just the file(s) in template_default?

No, it's not on the CUSTOM directory, using the file in template_default.

On the template I am working on the popup opens at the small image size
On the classic it opens almost correctly at the large size
No, it's not on the CUSTOM directory, using the file in template_default.
Well there must be something different if you get different results

Well there must be something different if you get different results

Thanks.
Yes, no kidding, being a custom template obviously there is something different!

Anyhow I think I found the culprit, I created a new install with all default templates, save the common, and css, and it's the image style:

img {
display: block;
height: auto;
max-width: 100%;
}

When I remove the above the popup opens fine at the larger size.

Any idea how to solve this conflict?

keneso:

Thanks.
Yes, no kidding, being a custom template obviously there is something different!

Anyhow I think I found the culprit, I created a new install with all default templates, save the common, and css, and it's the image style:

img {
display: block;
height: auto;
max-width: 100%;
}

When I remove the above the popup opens fine at the larger size.

Any idea how to solve this conflict?

Recommend using a tool such as firebug for firefox or similar for other browsers (typically pressing F12 on a pc wll take you to a debugger that should allow active changes to the css to play/test). To get a specific solution from those of the forum (not guesses) it would be easiest if the "site" were available for others to provide input.

As a side note, if the site is made accessible, understand that updates to css may not immediately become available depending on caching of the css as set by the server/site. Locally, may need to clear the browser cache to see the results of the hard work. :)

Thank you.

Yes I use the tools, but sometimes my head is just not able to see the solution; and do know a live site is much more helpful, so like sais in OP I've set up the live install if you please could take a look at it:
nanayawdesigns dot com/index.php
Please use index.php as w/o it you land on temporary page.

keneso,
have you resolved this problem?

when i look at the popup image, it DOES open the large image. the problem that i see is that the window my browser (Chrome) opens is small so that it looks like the image is a smaller size. but the image clearly is the larger image.

i would look into the part of the template that indicates the size of the pop-up window as opposed to the image itself as that looks to be the problem to me.

good luck!

Thank you carlwhat.

No I haven't solved it, I actually haven't gone after it, meanwhile if you come up with a solution please post back.
I think I should play with the js in modules/pages/product_info/jscript_main.php but not being a coder will be trial and errors.

the problem that i see is that the window my browser (Chrome) opens is small so that it looks like the image is a smaller size. but the image clearly is the larger image.
Yes that is exactly my case too, the large image is loaded, but the responsive bit makes it open small.
Yes happens both in chrome and firefox.

i think there is a function in one of your javascript files that is doing the resizing.

you link is set to here:

<a href="javascript:popupWindow('http://nanayawdesigns.com/index.php?main_page=popup_image&pID=2')">

when you open the popup window, the html is:

<body id="popupImage" class="centeredContent" onload="resize();">
<div>
<a href="javascript:window.close()"><img src="images/large/scarves/ekow-kente-orange-scarf_LRG.png" alt="Ekow Kente Orange - Click Image to Close" title=" Ekow Kente Orange - Click Image to Close " width="540" height="420"></a></div>

</body>

there is some function called resize that is executing when the pop-up windown opens, and i'm guessing that is what is causing your window to be much smaller than you would like.

i would search for this resize function which i'm thinking is in a *.js file; although i am far from 100%.

good luck!

Thank you carlwhat.

I hadn't checked this thread while I was playing around, this is what I did:
I removed

<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>');
//--></script>

and it opens a full window with large image.

This is all indicative of an incomplete install or some other modification not properly incorporated... If the javascript to do the resizing wasn't obvious in review of the source code and fles loaded wth the page, then probably wasn't stored in the correct location. Typically the resize is done to bring the window to the boundary of the image. The content removed above also removed clickable link to close popup window.

Btw, what are/were the large image size settings?

Thank you mc12345678.

I would exclude incomplete install, as both the local, and "live" behave the same.

Like said even with the classic template it doesn't open completely, though more than the cutome one; large image is 540x420, and in classic it opens to 540x400, and in both I don't see any close window link.

Actually I don't care much about the popup, so removing the js is not creating me a problem, as I'd like to use bootstrap lightbox modal 8custom is based on bootstrap); to this end do you think I can ask a question about the code change here, or shall I open new thread?

keneso:

Thank you mc12345678.

I would exclude incomplete install, as both the local, and "live" behave the same.

Like said even with the classic template it doesn't open completely, though more than the cutome one; large image is 540x420, and in classic it opens to 540x400, and in both I don't see any close window link.

Actually I don't care much about the popup, so removing the js is not creating me a problem, as I'd like to use bootstrap lightbox modal 8custom is based on bootstrap); to this end do you think I can ask a question about the code change here, or shall I open new thread?

Well, may just want to verify that all of the files made it to the server in their entirety... At the moment can't remember which file(s) ae involved with the described problem, but it is something that can happen/is frequently reported where the popup box shows small but "behind" the image is there in it's full glory and size.

As to posting hee about the other issue/question, if it relates to large image popup size and cutting (ie mght be a solution to that issue), then I don't see why it couldn't be carried on here... If it doesn't relate, then possibly a new thread, but if worst comes to worst, a moderator mght make adjustments... It's nothing personal, they would just be trying to organize the content to help the greater "group". As long as it can be found and the conversaton continue to it's end then I would say no big deal. :P

Thank you mc12345678

The files involved should be:
templates/default_templates/templates/tpl_modules_main_product_image.php
modules/main_product_image.php
modules/pages/popup_image/jscript_main.php
modules/pages/product_info/jscript_main.php

I double checked, and all of them are there, also considering that the local test was just a matter of unzipping the package in the wamp directory I'd guess the files are there too.

Anyhow I don't want to waste your time on this issue since like said I'd rather solve it thru bootstrap's modal, so let's concentrate on that if you please.

Thinking it over, based on your considerations too, maybe it'd be better to open a new thread, so please look for my next thread:
bootstrap product image modal

Thank you