Ok, jeg har ikke selv lavet følgende men det gør vel ikke noget (
http://www.codelifter.com/main/javascript/autosizeimagepopup.html). Tilføj dette til din <head>-sektion i den fil hvor du bruger <?php include "scripts/random_pic/random_pic.php";?> :
<script>
// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.
PositionX = 100;
PositionY = 100;
defaultWidth = 500;
defaultHeight = 500;
// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows
var AutoClose = true;
// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4) {
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle) {
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document) {
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();
}
}
</script>
og brug...
echo "<a href=\"java script:popImage('$image_folder/$files[$randID]','Some Title')\"><img src=\"$thumb_folder/$files[$randID]\"></a>";
...i selve scriptet.
Du vil altid (som dette javascript også gør) skulle tage stilling til browser-typen, men hvis du nu har adgang til Mysql kunne du gemme ting som højde og bredde på billedet når du laver dine thumbnails og derved bare kunne åbne en popup med disse dimensioner. Man kunne selvfølgelig også bare åbne billedet i php og aflæse dimensionerne direkte og så bruge dem, men det ville gøre scriptet lidt langsomere. Det med mysql er desuden også en KÆMPE fordel hvis du ligger alt for mange billeder i din image_folder, da scriptet jo gennemlæser hele folderen hver gang.