Neues Bild zentriert

Wenn auf Webseiten Bilder abgebildet werden, stellt sich immer die Frage der richtigen Grösse. Eine gute Möglichkeit ist, man zeigt ein relativ kleines Bild, das schnell geladen ist und sich gut in die Webseite integrieren lä;sst. Durch anklicken geht ein neues Fenster auf und das gewünschte Bild erscheint gross und zentriert auf dem Bildschirm.

Beispiel

Auf das Bild klicken, um es grösser in neuem Fenster anzusehen: Bildgrösse: 200 x 137 Pixel, kleines Bild 430 x 296 Pixel, grosses Bild (Strassenbahn: Zürich - Örlikon - Seebach, Wagen Nr. 1, Baujahr 1897)
Auf das Bild klicken, um es grösser in neuem Fenster anzusehen: Bildgrö;sse: 200 x 119 Pixel, kleines Bild 760 x 454 Pixel, grosses Bild

Man beachte: klickt man auf das eine Bild, so erscheint dieses in der Mitte. Klickt man auf das Bild, die Ausgangswebseite oder ein anderes Bild, so schliesst sich das neue Fenster, so bleibt immer nur maximal ein zusätzliches Fenster offen.
Das Script wurde getestet und läuft optimal mit: Firefox 1.5, 2.0; IE 6.0, 7.0; Opera 8.5, 9.2; SeaMonky; Netscape 7.1 und Mozilla 1.7b. Mit NN 4.7 funktioniert es nicht ganz optimal.

Wichtig ist, dass die grossen und kleinen Bilder einzeln gespeichert werden. Oft wird auf Webseiten nur das grosse Bild gespeichert und die Darstellung des Kleinen erfolgt auf den Webseiten nur dadurch, dass die Grössenangaben im Tag reduziert werden. Das funktioniert, ist aber eine schlechte Lösung! Denn dazu wird das grosse Bild geladen und im Browser umgerechnet.

Generell sollten die kleinen Bilder immer wenigstens so gross sein, dass der Inhalt erkannt wird. Zudem, keine kleinen Fixierbilder die nur einen Ausschnitt des Bildes beinhalten. Das verärgert Besucher nur und ist keine Bereicherung der Webseiten.
Die grossen Bilder sollten auch in Bildschirmen von 800 x 600 Pixel noch betrachtet werden können. Somit sollten die grossen Bilder maximal 770 x 550 Pixel aufweisen. Diese Bildgrösse genügt für viele Anwendungen. Grössere Bilder sollten "normal" verlinkt werden, dann kann nötigenfalls gescrollt werden.

Um das Ganze zu realisieren braucht, man zumindest ein JavaScript.
Von Vorteil ist die Verwendung von PHP, damit lässt sich die Bildgrösse in Pixel gut errechnen, insbesondere wenn mehrere verschieden grosse Bilder verwendet werden.
PHP ist aber nicht Voraussetztung dazu.

Erklärungen zum Code

Zu den Zeilen:

1 - 12: Der PHP-Teil dient dazu die Bildgrösse in Pixel zu ermitteln. Das JavaScript funktioniert auch ohne PHP, aber dann muss die Bildgrösse ermittelt und in HTML explizit eingegeben werden. Mit PHP ist das natürlich einfacher.

2: Es wird der Pfad zu den Bildern festgelegt.

4 - 5: Es wird die Bilddatei mit der Pfadangabe verbunden.

6: Nun wird mit der Funktion getimagesize() die Bildgrösse ermittelt. Die Grössen werden als Array in der Variablen $gross_x gespeichert. Der erste Wert der Variablen beinhaltet die Breite, der Zweite die Höhe.

7: In Zeile 5 wurde der Link zu grossen Bild ermittelt. Der Namen des kleinen Bildes unterscheidet sich vom Grossen nur durch den erweiterten Namen "_small". Beispiel: bild1.jpg und bild1_small.jpg
Mit der Funktion explode() zerlegen wir den Link bei allen Stellen wo ein "." vorkommt. Das ist hier einmal der Fall.
Die Variable $teil_x enthält als Array die Bestandteile.

8 - 10: Der Link des kleine Bildes wird zusammengefügt mit der Ergänzung "_small" in der Mitte.

11: Wie in Zeile 6 wird die Bildgrösse des kleinen Bildes ermittelt.

15 - 19: Um die ermittelten Pfade und Grössen in den Link einzufügen, geben wir in PHP mittels echo diesen aus.

16: Der Teil "title" könnte natürlich auch aus der Datenbank stammen. Wichtig ist aber der "href"-Teil. Es wird das JavaScript BildFenster verwendet.
In den Klammern des Scriptaufrufes geben wir drei Werte mit: URL, Breite und Höhe des grossen Bildes. Dabei ist darauf zu achten, dass die einzelnen Werte mit '...' eingebunden werden!
Die "\" dienen dazu, die jeweils nachfolgenden "'" nur als Text zu betrachten und nicht als PHP-Teil des echo-Befehls.

17: Die Einbindung des kleinen Bildes.
Der alt-Tag könnte natürlich auch aus der Datenbank kommen.

Wird PHP nicht verwendet, so sind lediglich die Zeilen 16 - 18 zu verenden und dabei die Variablen durch Konstanten zu ersetzen.

JavaScript: neues Bild zentriert

Erklärungen zum Code

Zu den Zeilen:

3 - 46: Die JavaScript Funktion BildFenster.

4: Die Variablen werden bestimmt.

7 - 18: Je nach Browser, muss der Zugriff anderst erfolgen. Es ist nicht nötig alle Browser explizit zu programmieren.

20: Es wird der linke Abstand vom Bildschirmrand aus berechnet.

22: Der obere Abstand wir mit 25 Pixel festgelegt. Eine Berechnung würde nicht viel nützen. Sollte das doch gewünscht sein, so ist diese Zeile auszukommentieren und dafür die Zeilen 13, 17 und 21 zu aktivieren.

24: Die Eigenschaften des Fensters werden festgelegt. Einige Angaben sind prinzipiell doppelt vorhanden, um so allen Browsern zu genügen.

26 - 28: Das neue Fenster wird initialisiert.

29 - 45: Das Fenster wird gefüllt. Die Teile "\n" ergeben im HTML-Quelltext Zeilenumbrücke.

34 - 36: Diese Zeilen können entfernt werden, dann schliesst sich das Fenster nicht gleich automatisch.