✔ open window - Grösse der Fenster automatisch umstellbar?

B

bettinacosta

Grünschnabel
Hallo
Auf http://www.coaster.ch zeige ich meine Bierdeckelsammlung. Ich möchste jetzt, dass wenn man jeden Deckel anklickt, öffnet sich ein Fenster wo man den Deckel grösser sehen kann. Ich will nur ein Fenster (nicht ein neuen Tab im Browser) so dass man die Website im Background sieht.
Ich habe mir folgenden Code überlegt (er ist noch nicht auf der Website):
HTML: 
<a href="javascript:void(0)" onClick="window.open('big_coasters.php?code_coaster=<? echo $key_coaster_code ?>','','width=600,height=400,toolbar=0,scrollbars=0,left=50,top=50')"><img alt="<? echo $key_coaster_code ?> - <? echo $coasters_brewery[$i][1] ?>" class="no_border" src="Photos/<? echo $return_country ?>/<? echo $shown_coaster ?>"></a>&nbsp;

Ich habe eine fixe Höhe und Breite eingegeben (nämlich die von dem grössten Bierdeckel) aber Bierdeckel gibt es in verschiedene Grösse und ich hätte gerne dass die Grösse des Fensters sich an die Grösse des Bierdeckel anpasst. Ist das möglich (und vor allem machbar?)... wenn ich in der Datenbank für jeden Bierdeckel die Breite und Höhe gespeichert hätte wäre es natürlich optimal, aber ich kann einfach nicht diese Information für 22000 Bierdeckel eintragen. Gibt es eine andere möglichkeit?
Vielen Dank im Voraus für jede Hilfe.
Bettina
 
Hi,

wenn du es über ein PopUp realisieren möchtest, musst du zunächst ein Bildobjekt erstellen und diesem die Quelle zuweisen. Nachdem es geladen ist, kannst du Breite und Höhe auslesen. Damit ist es dir nun möglich, die Fenstergrösse anzupassen.

Ich hab vor längerer Zeit mal ein entsprechendes Script geschrieben:
Code: 
<html>
<head>
<title>PicturViewer</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
/* ********************************************************** *
 * Funktionen zum Öffnen eines Bildes in einem neuen Fenster, *
 * das die Grösse des Bildes besitzt.                         *
 * Parameter: strImg     - Filename und Pfad des Bildes,      *
 *                         das angezeigt werden soll          *
 *            strAlttext - Alternativer Text zum Bild         *
 *                         ausgangsstring enthält             *
 *                                              Quaese, 2004  *
 * ********************************************************** */
// Globales Bildobjekt
objImg = null;
// Globales Fensterobjekt
hWin = null;

// Preload-Funktion
function loadImg(strImg, strAlttext){
  // Bildobjekt erstellen
  objImg = new Image();
  // Bildquelle zuweisen
  objImg.src = strImg;
  // Funktion zum Öffnen des Bildes aufrufen
  showImg(strImg, strAlttext);
}

// Anzeige- und Auswertungsfunktion
function showImg(strImg, strAlttext) {

  // Falls das Bild geladen wurde
  if(objImg.width > 0){
    // Höhe und Breite des Bildobjektes ermitteln
    var intHeight = objImg.height;
    var intWidth = objImg.width;

    // Falls noch ein Fensterhandle existiert
    if(hWin != null){
      // Versuchen, das Fenster zu schliessen
      try{
        hWin.close();
      }catch(e){}

      // Fensterhandle zerstören
      hWin = null;
    }

    // PopUp öffnen und Handle auf Fenster zurückliefern
    hWin = window.open("", "PictureViewer", "height="+intHeight+", width="+intWidth);

    // Dokument zeitverzögert formatieren
    window.setTimeout("formatDocument('"+strImg+"',"+intHeight+","+intWidth+",'"+strAlttext+"')", 100);

  // Falls das Bild noch nicht geladen wurde
  }else{
    // Funktion erneut aufrufen
    window.setTimeout("showImg('"+strImg+"','"+strAlttext+"')", 10);
  }
}

function formatDocument(strImg, intHeight, intWidth, strAlttext){
  // Dokument im neuen Fenster zum Bearbeiten öffnen
  hWin.document.open();

  // Dokumentbearbeitung vereinfachen
  with(hWin.document) {
    // Header schreiben
    write("<html style=\"margin: 0; padding: 0;\">\n");
    write("<head><title>PictureViewer</title></head>\n");
    // Body formatieren
    write("<body style=\"margin: 0; padding: 0;\">");
    // Bild einfügen
    write("<img name=\"bild1\", src=\"" + objImg.src + "\" width=\""+intWidth+"\" height=\""+intHeight+"\" alt=\""+strAlttext+"\" />");
    write("</body></html>");
  }
  // Dokumentbearbeitung beenden
  hWin.document.close();
}
 // -->
</script>
<style type="text/css">
  <!--
img{ border-width: 0;}
 //-->
</style>
</head>
<body style="color: black; background: #ffffff;">
<table>
	<tr>
	  <td><a href="#" onclick="loadImg('bild1.jpg', 'Bild 1'); return false;"><img src="bild1.jpg"></a></td>
	  <td><a href="#" onclick="loadImg('bilde2.jpg', 'Bild 2'); return false;"><img src="bild2.jpg"></a></td>
	</tr>
	<tr>
	  <td><a href="#" onclick="loadImg('bild3.jpg', 'Bild 3'); return false;"><img src="bild3.jpg"></a></td>
	  <td><a href="#" onclick="loadImg('bild4.jpg', 'Bild 4'); return false;"><img src="bild4.jpg"></a></td>
	</tr>
</table>
</body>
</html>

Anhand des kommentierten Quellcodes sollte klar sein, wie das Ganze funktioniert.

Ansonsten gibt es ja zahlreiche Varianten, die ohne PopUps auskommen. Stichworte zum Suchen wäre da z.B. Litebox, Lytebox oder Thickbox.

Ciao
Quaese
 
Hi,

ich habe eine Ahnung woran es liegen könnte - ab dem IE7 wird nur noch eine minimale Breite von 250 Pixeln zugelassen.
width = number
Internet Explorer 7. Sets the width of the window in pixels. The minimum value is 250, and specifies the minimum width of the browsers content area.
Zum Vergrößern anklicken....
Quelle: window.open (MSDN)

Gleiches gilt übrigens für die Höhe - Minimalwert ist hier 100.

Ausserdem habe ich in meinem Script einen Fehler entdeckt. In folgender Zeile ist ein Komma zuviel.
Code: 
write("<img name=\"bild1\", src=\"" + objImg.src + "\" width=\""+intWidth+"\" height=\""+intHeight+"\" alt=\""+strAlttext+"\" />");
Korrekt lautet sie so:
Code: 
write("<img name=\"bild1\" src=\"" + objImg.src + "\" width=\""+intWidth+"\" height=\""+intHeight+"\" alt=\""+strAlttext+"\" />");

Ciao
Quaese
 
Hi

nochmals Danke für deine schnelle Antwort. Eingentlich das Foto dass im Fenster angezeigt wird ist immer noch zu klein (ich wollte einfach eine schnelle Test machen und ich hatte das originale Foto zu viel verkleinert). Aber die Idee ist dass man alle Details vom Deckel anschauern kann. Darum wrid das Foto sicher grösser als 250 x 100.
Ich werde jest dass Thema als erledigt setzen.
Gruss und schönes Wochenende.
Bettina
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück