Jørn Wildt
Dealing with Zikula and other interesting stuff
image popup modification
-
- rank:
- 12
- registered:
- March 2009
- Status:
- offline
- last visit:
- Posts:
- 0
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.