Javascript - Bildbetrachter als neue Seite

Javascript: Bildbetrachter - Öffnen einer Grafik im selben 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 das normale Foto auf einer neuen Seite präsentiert.

Hierfür hätte man - wenn man serverseitige Programmierung ausschliesst - 2 Möglichkeiten: entweder man erstellt für jedes vergrössert darzustellende Bild eine separate HTML-Seite oder man kann es in JavaScript lösen.

Da keinerlei Navigationselemente enthalten sind, eignet sich dieses Verfahren nur für Seiten mit Frames. Oder ihr legt noch Hand an.


Anmerkung:
Auf der Webseite ist dieser hier beschriebene Bildbetrachter nicht mehr in Verwendung. Es werden stattdessen Popup-Fenster verwendet. Daher gibt es nachfolgend eine Demo.


Demo

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



Hinweis:
Demonstration nicht möglich. Nach Klick auf die Grafik kann die vergrösserte Ansicht nicht dargestellt 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 eine neue Seite erzeugt wird.

  1. Da wir keine Datei haben, die geladen werden soll, wird mit einem document.open(); der Browser veranlasst, eine neue (leere) Seite anzuzeigen.
  2. 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.
  3. Zu guterletzt wird das virtuelle Dokument per document.close(); geschlossen und der Browser zeigt es an.

Um zur letzten Seite zurück zu springen, lasse ich das aktuelle Dokument nochmal vom Webserver holen. Der Dateiname steckt in der Javascript-Variable document.location.pathname. Die Nutzung des History-Objektes hätte sich eher angeboten, da ein history.back(); auch die letzte horizontale Position des letzten Dokumentes einstellt. Leider funktionierte das history.back(); aus diesem "künstlichen" Dokument heraus nicht mit allen Browsern.

Für alle Hungrigen gibt es hier den Quellcode des JavaScript-Anteils:

   function Zoom(myPicture)
   {
        document.open();
        document.write('<HTML>');
        document.write('<HEAD>');
        document.write('<TITLE>Bild-Betrachter</TITLE>');
        document.write('</HEAD>');
        document.write('<body text="#A0A0A0" bgcolor="#000000">');
        document.write('<DIV ALIGN=CENTER>');
        document.write('<h3>- - Bild-Betrachter - -</H3>\n');
        document.write('Bild anklicken, um zur&uuml;ck zu gehen.<BR>');
        document.write('<A HREF="' + document.location.pathname + '">');
        document.write('<IMG SRC="'+ myPicture + '"');
        document.write('  ALT="Bild anklicken, um zur&uuml;ck zu gehen."');
        document.write('  BORDER=0>');
        document.write('</A>');
        document.write('</DIV>');
        document.write('</BODY></HTML>');
        document.close();
   }
Javascript: Bild-Betrachter


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:
Javascript auslagern

andere Variante zur Anzeige von Grafiken:
Grafik in einem Popup anzeigen

Seitenanfang