dat kan zeker
( of toch ongeveer .. )
ik doe het zo :
in de img tag van de thumbnail, zet ik het volgende :
PHP:
onclick="openFoto('x',y,z)
waarbij
X het pad is naar de grotere versie v/d foto
Y de width is van de grote foto
Z de height is van de grote foto
bv:
PHP:
<img src="images/fotoKlein.jpg" alt="thumb" onclick="openFoto('images/fotoGroot.jpg',400,300) />
dan zet ik bij mijn javascript het volgende:
PHP:
function openFoto(url,w,h)
{
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+'resizable=0';
window.open("popup.htm?"+url,"", winprops)
}
wat doet dat nu ?
wel, de var's url, w & h komen binnen ..
met de url doe ik nix speciaals, maar de w en de h gebruik ik om de winl en wint te berekenen, die nodig zullen zijn om de foto te centreren ..
dan geef smijt ik alle eigenschappen van de popup in de var winprops, en dan open ik een popup met alle variabelen ..
wat staat er dan nog in popup.htm ?
PHP:
<html>
<head>
<title></title>
<script language='javascript'>
var arrTemp=self.location.href.split("?");
var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
var NS = (navigator.appName=="Netscape")?true:false;
function FitPic()
{
iWidth = (NS)?window.innerWidth:document.body.clientWidth;
iHeight = (NS)?window.innerHeight:document.body.clientHeight ;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
self.focus();
};
</script>
</head>
<body bgcolor="#000000" onload='FitPic();' topmargin="0"
marginheight="0" leftmargin="0" marginwidth="0">
<script language='javascript'>
document.write( "<img src='" + picUrl + "' border='0' onclick='javascript:top.window.close()' />" );
</script>
</body>
</html>
die pagina haalt dan eerst de url terug op, en zal dan de popup zo resizen, dat hij perfect evengroot is als de foto ..
in de body laat je dan de img tag schrijven om de foto te kunnen tonen, en voeg je er een klein onclick aan, zodanig dat wanneer je op de grotere versie van de foto klikt, deze automatisch sluit ..
het geheel in werking kan je hier zien :
http://users.pandora.be/wodka/xml/buds1.xml
klik maar eens op een foto om die eerst groter te tonen, en dan eens op de grotere versie om deze te sluiten ..
( pagina is wel een xml maar het principe is hetgeen hier uitgeschreven staat)
ad: