Bilder in vorgegebener Fenstergröße öffnen.

Hallo zusammen,

ich möchte dass die Bilder auf meiner Website sich in einem Fenster öffnen, welches genau so groß ist, wie das Bild.

Ich hab bei google schon da nach gesucht. Aber leider bekomme ich dass nicht umgesetzt.


Kann mir jemand erklären, wie das geht?


Gruß
Rockford

05.09.2005 09:47


Hallo Rockford,

Du kannst mit JavaScript die Eigenschaften eines zu öffnenden Fensters steuern, darunter auch Höhe und Breite, siehe Auflistung in SELFHTML

Konkret könnte man das folgendermaßen umsetzen:

Im head-Bereich wird eine Funktion popup() definiert:


<script language="JavaScript">
<!--
function popup(name,eigenschaften)
{
window.open('',name,eigenschaften);
}
//-->
</script>

die Links im body-Bereich sind dann folgendermaßen aufgebaut:


<p><a href="bild-1.html" target="Popup" onclick="javascript:popup('Popup','width=200,height=200')">Bild Nr. 1</a><br>
<a href="bild-2.html" target="Popup" onclick="javascript:popup('Popup','width=100,height=300')">Bild Nr. 2</a><br>
<a href="bild-3.html" target="Popup" onclick="javascript:popup('Popup','width=300,height=100')">Bild Nr. 3</a></p>

05.09.2005 11:08 | geändert: 05.09.2005 11:11


bis hier schon mal vielen Dank.


Die Liste von selfhtml habe ich schon gefunden. Wenn ich versuche in Frontpage etwas einzubauen, gibt es immer nur Fehler.

Was meinst Du denn mit function
popup(name,eigenschaften)
und
window.open('',name,eigenschaften);

Was kommt denn bei name, eigenschaften rein?


Gruß
rockford

05.09.2005 11:32


Was gibt Frontpage denn für Fehler aus?

Den oberen Teil mit der Funktion fügst du unverändert zwischen <head> und </head> ein. name, eigenschaften sind die Parameter, die später bei Aufruf der Funktion in den JavaScript-Links mit konkreten Werten versehen werden.

javascript:popup('Popup','width=200,height=200')

- name gibt den Namen des Fensters an, in welchem sich die Seite mit dem Bild öffnen soll - in diesem Fall habe ich das Fenster 'Popup' genannt

- unter eigenschaften kannst du die Eigenschaften des Fensters festlegen, wie auf SELFHTML aufgeführt - ich habe in diesem Beispiel jeweils Höhe und Breite angegeben, daneben kann man auch noch die Position angeben (top, left), welche Leisten im Fenster (nicht) erscheinen etc.

05.09.2005 11:58


However... es funktioniert. Danke(!)


Bei mir sieht es jetzt so aus:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Neue Seite 1</title>


<script language="JavaScript">
<!--
function popup(name,eigenschaften)
{
window.open('',name,eigenschaften);
}
//-->
</script>


</head>

<body>

<p><a href="images/bdwgr.jpg" target="Popup" onclick="javascript:popup('Popup','width=820,height=553')">Bild Nr. 1</a><br>


</body>

</html>


Aber der "Name" sagt mir immer noch nichts. Im Quelltext steht jetzt target="Popup". Ist dass der Name?

05.09.2005 12:15


Ja, name bezeichnet den Namen des sich öffnenden Fensters, in diesem Fall "Popup". Im Quelltext steht es zweimal, zuerst als target und dann nochmal als erster Paramater von popup()

<p><a href="images/bdwgr.jpg" target="Popup" onclick="javascript:popup('Popup','width=820,height=553')">Bild Nr. 1</a><br>

Du kannst auch einen anderen Namen wählen, nur muss der dann in beiden Fällen identisch sein

05.09.2005 12:34


Also so 100%ig funktioniert es noch nicht.

Die Bilder haben 800x533 Pixel. Entweder ist das Fenster zu groß, oder ich taste mich langsam an die Größe ran. Dann wird aber das Bild skaliert.
Ich schaffe es so nicht, das Fenster genau so groß zu machen, dass es bündig mit dem Fenster abschliest.

So wie hier, möchte ich es eigentlich haben:
http://www.svenbader.de/i_galerie.htm

05.09.2005 12:55


Hi Rockford,

Die Bilder haben 800x533 Pixel.
Das sind ja ziemliche Teile ;)
Entweder ist das Fenster zu groß, oder ich taste mich langsam an die Größe ran
Wie Jörg Dir vorgeschlagen hat solltest Du das mit der JS-Funktion window.open lösen. Allerdings gibt es immer den Haken, dass unterschiedlich große Bilder in einer fixen Fenstergröße entweder abgeschnitten oder mit Rand angezeigt werden. Da gibt es aber die Möglichkeit, JS (dieses muss sowieso aktiviert sein, wenn Du die Bilder auf diese Art anzeigen willst) und einen Funken PHP einzusetzen. Erweitere dazu een JS-Code im Head der Hauptseite wie folgt:
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);}
	}


Speichere folgendes dann als 'picture.php' im selben Verzeichnis: (Name und VZ so, weil in der JS-Funktion überhalb so benannt - Du kannst natürlich die Datei an beiden Orten umbenennen, nur das .php ist wichtig.
<html>
  <head>
	  <title>Bildergalerie</title>
		<style type="text/css">
		  body { margin:0; padding:0;	}
			img { display:block; }
		</style>
   <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 scroll="no" onload="reSizeToImage();self.focus()" onblur="self.close()">
  <img id="pic0" name="pic0" src='<?=$_GET["picname"]?>.jpg'>
</body>
</html>

Und versieh danach jeden Link, welcher ein Bild öffnen soll, beispielsweise so:
<a href="javascript:popup('../bilder/bild1');"><img.... /></a>
(Pfad natürlich korrigieren, die Standard-Erweiterung ist .jpg, jene würde ich aus Sicherheitsgründen in der PHP-Datei hardcodiert lassen, und nicht mit übergeben)

Der Link wird Dir dann ein Fenster öffnen, welches vorerst eine Standardgröße von 100*100 hat, nachdem das Bild geladen ist, vergrößert/verkleinert sich das Fenster auf die Bildgröße. Wird auf die Seite zurückgeklickt, schließt sich das Fenster automatisch wieder.

Auf der von dir angegebenen Seite übergibt die Website die Größe fixiert. Die Bilder haben dann ganz einfach genau dieselbe Größe.
Dann wird aber das Bild skaliert.
Das kann fast Nur geschehen, wenn Du das Bild selbst verzerrst. Das solltest Du nicht machen, sprich bei einer variablen Bildgröße solltest Du width/height im img-tag / css nicht angeben.

05.09.2005 13:28 | geändert: 05.09.2005 14:17


Jetzt wird es schon etwas komplizierter.

Also ich habe nun eine Datei picture.php im root-verzeichnis der Seite gespreichert. Den Quelltext habe ich einfach so wie von Dir vorgeschlagen kopiert.


Die eigentliche Seite sieht jetzt so aus:



<HTML>
<HEAD>
<TITLE>Test</TITLE>




<script language="JavaScript">
<!--
function popup(name,eigenschaften)
{
window.open('',name,eigenschaften);
}


var ns = (document.all)?false:true;
var browserVersion = parseFloat(navigator.appVersion );
PositionX = 100;
PositionY = 100;
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>


</HEAD>

<body>

<a href="javascript:popup('images/bdw.jpg');">Text oder Bild</a>
</body>


Es funktioniert aber nicht. Wo ist der Fehler?

05.09.2005 13:49


Du hast die Funktion popup doppelt deklariert.
Der Block
function popup(name,eigenschaften)
{
window.open('',name,eigenschaften);
}
muss raus.

Dann solltest Du den Link noch korrigieren, von:
<a href="javascript:popup('images/bdw.jpg');">Text oder Bild</a>
nach
<a href="javascript:popup('images/bdw');">Text oder Bild</a>

05.09.2005 13:57