Pop Up Problem ;-)

Habe den Thread hier aus den Augen Verloren xD
Deswegen hier nochmal meine Frage^^
Wie kriege ich das bei dem script hin das er die Bilder nun Zentriert
anzeigt beim draufklicken? Und das im Pop up um dem Bild ein Rahmen von 5px ist!

Ps. Super Script im Übrigen!

Hier der Teil im Headbereich steht:
<script language="JavaScript">
<!--
var ns = (document.all)?false:true;
var browserVersion = parseFloat(navigator.appVersion );
PositionX = 100;
PositionY = 100;
defaultWidth  = 420;
defaultHeight = 420;
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 popup(imageURL){
if (isNN){imgWin=window.open('picture.php?picname='+imageURL,'',optNN);}
if (isIE){imgWin=window.open('picture.php?picname='+imageURL,'',optIE);}
}
//-->
</script>


picture.php
<html>
<head>
<title>D.A.S.K - Gallery</title>
 <script type="text/javascript">
   var isNN,isIE;
   if (parseInt(navigator.appVersion.charAt(0))>=4){
     isNN=(navigator.appName=="Netscape")?1:0;
     isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
}
function reSizeToImage(){
     if (isIE) {
       window.resizeTo(100,100);
       width=100-(document.body.clientWidth-document.images[0].width);
       height=100-(document.body.clientHeight-document.images[0].height);
       window.resizeTo(width,height);
}
     if (isNN) {
       window.innerWidth=document.images["pic0"].width;
       window.innerHeight=document.images["pic0"].height;
}
}
</script>
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no" onload="reSizeToImage();self.focus()" onblur="self.close()">
 <img id="pic0" border="1" name="pic0" src='./images/pics/<?=$_GET["picname"]?>'>
</body>
</html>

10.09.2006 00:06 | geändert: 10.09.2006 00:06


EInen Rahmen kannst du mit der CSS-Eigenschaft border festlegen, zentrieren kannst du das Bild über ein text-align:center in einem übergeordneten Element, z.B.:

<div style="margin-top:100px; text-align:center"><img id="pic0" style="border:5px solid white" name="pic0" src='<?=$_GET["picname"]?>'></div>

10.09.2006 00:58 | geändert: 10.09.2006 00:59


Dadurch wird doch aber das Pop-Up Fenster nicht Zentriert dargestelt oder? Sondern nur der Inhalt des Bildes im Popup.

Ich wollte Das Popup Fenster Zentriert haben.

10.09.2006 01:19


Zum Zentrieren des Popups kannst du die Breite des Bildschirms abfragen (screen.width) - von dieser ziehst du die Breite des Popups ab und teilst die Differenz nochmal durch zwei und erhälst dadurch die linke Position des Popups

defaultWidth  = 420;
defaultHeight = 420;
PositionX = (screen.width - defaultWidth) / 2;
PositionY = 100;

10.09.2006 01:40 | geändert: 10.09.2006 01:45


Mhh ich habe es mal getestet aber so wirklich klappt das nicht! Richtig Zentriert ist das Bild nicht. Gibt es da evtl noch ne andere Lösung?

10.09.2006 02:12


In Firefox zentriert es einwandfrei. Im Internet Explorer würde es auch funktionieren, wenn das Popup nicht wieder anschließend über window.resizeTo auf 100px + Bildbreite zusammengestaucht wird - dann muss man natürlich auch die Position über eine ensprechendes window.moveTo nochmals verschieben:

    if (isIE) {
      window.resizeTo(100,100);
      width=100-(document.body.clientWidth-document.images[0].width);
      height=100-(document.body.clientHeight-document.images[0].height);
      window.resizeTo(width,height);
      PositionX = (screen.width - width) / 2;
      window.moveTo(PositionX,100);
}

10.09.2006 09:02 | geändert: 10.09.2006 09:04


Teilen:

E-Mail-Support von Jörg Kruse

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.


[BBCode-Hilfe]