Javascript - Bildbetrachter im Popup-Fenster

Javascript: Bildbetrachter - Öffnen einer Grafik im Popup-Fenster
Auf der Katzen-Webseite meiner Eltern sind viele Fotos. Diese werden auf einer HTML-Seite immer als kleine Index-Grafik angezeigt. Per Klick darauf wird ein Popup-Fenster in der Bildschirmmitte geöffnet und das Foto angezeigt.


Demo

So sieht es in der Praxis aus - einmal das Bild anklicken:



Hinweis:
Demonstration nicht möglich. Nach Klick auf die Grafik kann das Popup-Fenster nicht geöfnet werden.
Entschuldigung, an dieser Stelle wird ausnahmsweise aktiviertes Javascript benötigt. Eine gewünschte Funktionalität ist daher nicht verfügbar.
weitere Informationen zu Javascript

Seitenanfang



JavaScript

Das Ganze funktioniert so, dass man eine Funktion schreibt, die als Parameter einen Dateinamen der anzuzeigenden Grafik übergeben bekommt. Diese Funktion sorgt dafür, dass ein Popupfenster geöffnet wird und die Grafik angezeigt wird.

  1. Mit der Funktion window.open wird das Popup geöffnet.
  2. Da wir keine Datei haben, die geladen werden soll, wird mit einem document.open(); der Browser veranlasst, eine neue (leere) Seite anzuzeigen.
  3. Anschliessend wird der gesamte HTML-Code mit document.write(...); hineingeschoben.
    Irgendwo im Body wird der Image-Tag geschrieben; als SRC-Attribut wird der Dateiname der Grafik eingetragen, den wir der Funktion mitgeben.
    Anm.:
    Falls wer serverseitige Programmierung kennt: die Übergabe des Headers text/html und 2 x Zeilenvorschub ist nicht notwendig.
  4. Zu guterletzt wird das virtuelle Dokument per document.close(); geschlossen und der Browser zeigt es an.
  5. Das Popup-Fenster wird zentriert und erhält den Focus.


Seitenanfang



Einbindung im HTML-Code

Man sollte die obigen Codezeilen in eine js-Datei auslagern und im Header der HTML-Datei referenzieren.
Der Aufruf der Funktion kann z.B. so aussehen:

   <HTML>
      <HEAD>
         ...
         <SCRIPT SRC="graphic.js" LANGUAGE="JavaScript"></SCRIPT>
         ...
      </HEAD>
      <BODY>
      ...
         <A HREF="foto001.jpg"
           ONCLICK="javascript:Zoom('foto001.jpg'); return false;">
         <IMG SRC="foto001_index.jpg" BORDER="0"></A>
      ...
      </BODY>
   </HTML>
HTML: Bild-Betrachter verwenden

Bei diesem Link wird die Grafik bei deaktiviertem Javascript im Browser angezeigt.
Wenn Javascript eingeschalten ist, wird die Funktion verwendet. Wichtig ist hierbei noch, das return false; dahinterzusetzen.


verwandtes Thema:
Grundlagen:
Browserfenster öffnen
Javascript auslagern

andere Variante zur Anzeige von Grafiken:
Grafik im selben Fenster anzeigen

Seitenanfang