thegamebrain
Technical User
I'll do my best to describe my situation, as my JavaScript knowledge is limited to making modifications of existing scripts.
The script I have currently is resizing thumbnail images which open full-size images in a popup when clicked. The script sizes the window to fit the images pefectly, then centers the window according to x and y values of the user's screen.
I need to do a few things.
1. Create some whitespace around the image (say 30 pixels) top, bottom, left and right. (If the image is 400 x 400, then the new popup should be 460 x 460)
2. Center the image within this new enlarged popup. Currently, I've gotten as far as having the image top left.
3. Above the enlarged image in the popup, display the name of the product.
I assume if I someone can help write the HTML inside the JavaScript I can use variables I already use to display the product name.
You can see the current script in action here:
http://www.bouclair.ca/2007/en/accents/test.html
I'd appreciate any help or insight. Thanks.
S.
The script I have currently is resizing thumbnail images which open full-size images in a popup when clicked. The script sizes the window to fit the images pefectly, then centers the window according to x and y values of the user's screen.
I need to do a few things.
1. Create some whitespace around the image (say 30 pixels) top, bottom, left and right. (If the image is 400 x 400, then the new popup should be 460 x 460)
2. Center the image within this new enlarged popup. Currently, I've gotten as far as having the image top left.
3. Above the enlarged image in the popup, display the name of the product.
I assume if I someone can help write the HTML inside the JavaScript I can use variables I already use to display the product name.
Code:
<Script type="text/javascript">
//really not important (the first two should be small for Opera's sake)
PositionX = 10;
PositionY = 10;
defaultWidth = 600;
defaultHeight = 400;
//kinda important
var AutoClose = true;
//don't touch
function openFullSize(imageURL,imageTitle){
var imgWin = window.open('','_blank','scrollbars=no,resizable=1,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY);
if( !imgWin ) { return true; } //popup blockers should not cause errors
imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+
'function resizeWinTo() {\n'+
'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+
'var oH = document.images[0].height, oW = document.images[0].width;\n'+
'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled
'window.doneAlready = true;\n'+ //for Safari and Opera
'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+
'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
'}\n'+
'<\/script>'+
'<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+
(document.layers?('<layer left="0" top="0">'):('<div style="position:absolute;left:0px;top:0px;display:table;">'))+
'<img src="'+imageURL+'" alt="Loading image ..." title="" onload="resizeWinTo();">'+
(document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
imgWin.document.close();
if( imgWin.focus ) { imgWin.focus(); }
return false;
}
</script>You can see the current script in action here:
http://www.bouclair.ca/2007/en/accents/test.html
I'd appreciate any help or insight. Thanks.
S.
