Topic: image popup modification
Converted
avatar
12
Posts: 0

Posted:
24.Sep 2006 - 00:24

Hi there,

a customer wanted the Image Popups look more fancy, so I modified it with a JavaScript-resizer I found somewhere. Now I want to share the code. It modifies only one JS-function of Photoshare. You don't have to change anything else neither in your templates nor somewhere else:

photoshare/pnjavascript/showimage.js
exchange the function imgDisplayPopup

Code

function imgDisplayPopup(url)

{// we only need iid, so dump the rest:

url=url.replace(/[^0-9]*/, "");

var imageWindow = window.open('/i.php?i='+url,'image','width=600px,height=300px,toolbar=0,location=0,directories=0,menuBar=0,scrollbars=1,resizable=1');

imageWindow.focus();

}


And you need a new file i.php, that you can drop in the document root, if you don't mind.
Here the content (change the s__cript to script):

Code

<?php

function clean_in($dirt){

return strip_tags(addslashes($dirt));

}

?>

<html>

<head>

<title></title>



<s__cript type="text/javascript" language="JavaScript" >

function BrowserCheck() {

var browser = navigator.appName

if (browser=="Netscape") this.browser = "ns"

else if (browser=="Microsoft Internet Explorer") this.browser = "ie"

else this.browser = browser

this.v = navigator.appVersion

this.version = parseInt(this.v)

this.ns = (this.browser=="ns" && this.version>=4)

this.ns4 = (this.browser=="ns" && this.version==4)

this.ns5 = (this.browser=="ns" && this.version==5)

this.ie = (this.browser=="ie" && this.version>=4)

this.ie4 = (this.v.indexOf('MSIE 4')>0)

this.ie5 = (this.v.indexOf('MSIE 5')>0)

this.mac = (this.v.indexOf("Mac")>0)

this.oldWin = (this.v.indexOf("3.1")>0)

this.min = (this.ns||this.ie)

}

is = new BrowserCheck();



function window_onload() {

// never show more than the screen can handle

if(screen.availHeight>document.i.height+50){

Hoehe =document.i.height+50;

}else{

Hoehe =screen.availHeight;

window.moveTo(0, 0);

}

if(screen.availWidth>document.i.width+50){

Breite =document.i.width+50;

}else{

Breite =screen.availWidth;

window.moveTo(0, 0);

}

window.focus();

//window.resizeTo(0,0);

if (is.ie) {

Grow = window.setInterval("window_resizerIE(25,25)",1)

} else if (is.ns) {

Grow = window.setInterval("window_resizerNS(25,25)",1)

}

}



function window_resizerIE(x,y) {

if (document.body.clientWidth < Breite) {

window.resizeBy(x,0);

}

if (document.body.clientHeight < Hoehe) {

window.resizeBy(0,y);

}

if (window.innerHeight >= Hoehe-10 && window.innerWidth >= Breite){

window.clearInterval(Grow);

}

}



function window_resizerNS(x,y) {

if (window.innerWidth < Breite) {

window.resizeBy(x,0);

}

if (window.innerHeight < Hoehe-10) {

window.resizeBy(0,y);

}

if (window.innerHeight >= Hoehe-10 && window.innerWidth >= Breite){

window.clearInterval(Grow);

}

}

</s__cript>

<style type="text/css">

body{background-color:black;text-align:center;}

</style>

</head>

<body onload="return window_onload();" >

<center>

<img src="index.php?module=Photoshare&type=show&func=viewimage&iid=<?php echo clean_in($_GET['i']) ; ?>" id="i" name="i" align="center" onclick="window.close();">

</center>

</body>

</html>

Hopefully this saves someones time.