Popup Images Issues

[WoodsWalker]

Hi, All,

 

I recently sourced this thread, which provided some improved Javascript for catalog/popup_image.php. The reason I made this small mod was that my popup-image window was always smaller than the image itself and cut it off at the edges.

 

Now that I have modified popup_image.php, the window size is good, but the window itself behaves strangely.

 

In Firefox on Windows XP, the popup window initially appears in the top left of the browser window (where I want it), and then disappears behind all the active windows on my desktop, to a position in the center of my computer screen.

 

In IE 7.0 on Windows XP, the popup window appears in front of all active windows as it should, but again it is in the center of the computer screen.

 

Here is the Javascript code in popup_image.php, as I have it now.

 

<script language="javascript"><!--
var i=0;

function resize() {

if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
i=23; //IE 6.x on Windows XP SP2
} else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
i=50; //IE 6.x somewhere else
} else if (window.navigator.userAgent.indexOf('MSIE 7.0') != -1) {
i=0; //IE 7.x
} else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=38; //Firefox on Windows
} else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1 && window.navigator.userAgent.indexOf("MSIE") == -1) {
i=45; //Mozilla on Windows, but not IE7
} else if (window.opera && document.childNodes) {
i=50; //Opera 7+
} else if (navigator.vendor == 'KDE' && window.navigator.userAgent.indexOf("Konqueror") != -1) {
i=-4; //Konqueror- this works ok with small images but not so great with large ones
//if you tweak it make sure i remains negative
} else {
i=70; //All other browsers
}

if (document.images[0]) {
imgHeight = document.images[0].height+150-i;
imgWidth = document.images[0].width+80;
var height = screen.height;
var width = screen.width;
var leftpos = width / 2 - imgWidth / 2;
var toppos = height / 2 - imgHeight / 2;
window.moveTo(leftpos, toppos);
window.resizeTo(imgWidth, imgHeight);
}

self.focus();

}
//--></script>

 

I have successfully customized imgHeight and imgWidth. But, can anyone give me some pointers as to what most of this script does, especially the part with the else if statements (what is "!", and what is "i", for instance)?

 

If I can get the hang of this, I can probably fix such problems myself. Or, if you have the answer as to why my popup window moves to the back of the other windows in Firefox, and to the center of the screen in most browsers, I'd appreciate that as well.

 

Thanks for any and all help!

~Wendy

[WoodsWalker]

Me again...

 

PS: Before in made the mod, the Javascript in popup_image.php looked like this:

 

<script language="javascript"><!--
var i=0;
function resize() {
 if (navigator.appName == 'Netscape') i=40;
 if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+60-i);
 self.focus();
}
//--></script>

 

Perhaps I should keep it this simple, put this original code back and just adjust the width and height?

 

Thanks,

~Wendy

[arietis]

I have successfully customized imgHeight and imgWidth. But, can anyone give me some pointers as to what most of this script does, especially the part with the else if statements (what is "!", and what is "i", for instance)?

 

If I can get the hang of this, I can probably fix such problems myself. Or, if you have the answer as to why my popup window moves to the back of the other windows in Firefox, and to the center of the screen in most browsers, I'd appreciate that as well.

 

the '!' means 'not'. so 'if (x != -1)' means 'if x is not equal to -1'.

 

the indexOf() method searches a string to see if it contains another string. it returns the index of the string within the search string, or if it's not found, a -1 is returned. so if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) is looking for the string 'MSIE 6.0' in the useragent identifier, and if it's found (e.g. indexOf() *not* returning -1) it knows that the user has IE version 6.0.

 

the 'i' is a (poorly named, in my opinion) value that is being subtracted from the height of the image. different browsers will create the popup window with different amounts of 'overhead', such as status bars, caption bars, buttons, etc.

 

the majority of the code (the if ... else stuff) is use to determine which browser the user has. depending on the browser and version, 'i' is set to different values and later used to adjust the position of the window when it's centered on the screen. (that's what the window.resizeto() is doing...)

 

i hope that clears things up a little bit. :)

[WoodsWalker]

Thanks Dave! That does clear up a few things. B)

 

Having tested my site in a few browsers now, I have decided that most of that code in the mod is unnecessary, and besides, something about it is causing my pop-up to hide itself behind the browser window. So, I removed the mod and went back to the original code, as quoted above. I added 20 to both the width and the height, and now my pop-ups look fine.

 

Thanks again,

~Wendy

[lindsayanng]

maybe you can just add a lightbox contribution and then you will have pretty fancy boxes that hold your images AND they will fit your images too!!!

[arietis]

Thanks Dave! That does clear up a few things. B)

 

Having tested my site in a few browsers now, I have decided that most of that code in the mod is unnecessary, and besides, something about it is causing my pop-up to hide itself behind the browser window. So, I removed the mod and went back to the original code, as quoted above. I added 20 to both the width and the height, and now my pop-ups look fine.

 

no problem. :)

 

it might be the moveTo() or resizeTo() that is causing the window to go behind the main browser window. i'm sure there's a way to get it back on top as i've seen popups do that in the past. i just don't know what it is off the top of my head but maybe someone else here does....