Bildergalerie, in der man die Bilder (in voller Größe) durchblättern kann. Dazu wird die Webseite nicht verlassen, sondern bleibt abgeblendet im Hintergrund sichtbar und im Vordergrund werden die Bilder meist formatfüllend (also über den ganzen Bildschirm) dargestellt. Man kann jederzeit leicht wieder die Bilder schließen und zur Webseite zurückkehren.
Als Lightbox (nach dem englischen Wort für Leuchttisch) bezeichnet man vor allem im Webdesign eine besondere Form um Fotos, andere Bilder, Videos und sonstige Multimediainhalte zu präsentieren. Klickt der Benutzer ein Vorschaubild an, so wird die Seite abgedunkelt und das großformatige Bild darüber schwebend angezeigt. Häufig besteht auch die Möglichkeit zwischen den Bildern einer Seite zu blättern. (https://de.wikipedia.org/wiki/Lightbox)
Die erste Lightbox programmierte 2005 Lokesh Dhakar, der das Skript kurz darauf unter einer freien Creative-Commons-Lizenz veröffentlichte. (http://lokeshdhakar.com/projects/lightbox2/)
Arbeitsschritte:
Es gibt einen Ordner namens "images". Dieser muss ein direkter Unterordner des Ordners sein, in dem die HTML-Datei gespeichert ist, in der die lightbox verwendet wird. Falls es diesen Unterordner nicht gibt, einfach einen solchen anlegen.
Für die JavaScript- und CSS-Dateien von lightbox2 am besten einen eigenen Ordner anlegen, z.B. namens "lightbox2". Dieser sollte ein Unterordner des Ordners sein, in dem die HTML-Datei gespeichert ist, in der die lightbox verwendet werden soll.
Aus der zip-Datei folgende Dateien kopieren und im Unterordner
"lightbox2" einfügen:
lightbox2-master\dist\css\lightbox.css und
lightbox2-master\dist\js\lightbox-plus-jquery.js
Aus der zip-Datei folgende Dateien kopieren und im Unterordner
"images" einfügen:
lightbox2-master\dist\images\… alle 4 Bilder (close.png, loading.gif,
next.png, prev.png)
In der HTML-Datei, in der die lightbox verwendet werden soll, folgende Zeilen einfügen:
Im Head <head>…</head> (am besten nach der Zeile mit
<link
…> auf die eigene CSS-Datei):
<link href="lightbox2/lightbox.css"
rel="stylesheet" type="text/css">
Im Body <body>…</body> (am besten
am Ende der Datei als letzte Zeile vor
</body>):
<script src="lightbox2/lightbox-plus-jquery.js"></script>
Anmerkung: Dies bewirkt, dass zuerst die gesamte HTML-Datei im Browser
aufgebaut wird und dann erst der JavaScript-Code geladen wird. Der wird
ja erst dann gebraucht, wenn die Benutzer auf ein Bild der lightbox
klicken. Wäre das script-Element am Anfang der HTML-Datei,
so würde der JavaScript-Code schon downgeloadet werden während auch die
HTML-Datei weiter downgeloaded wird. Dadurch verzögert sich dies und das
Aufbauen der HTML-Datei im Browser dauert länger - was den Benutzern
unangenehm auffallen kann.
Die eigenen Fotos für die lightbox in den Unterordner "images" kopieren.
Danach die Bilder in die HTML-Datei einfügen. Dafür gibt es verschiedene Varianten:
.lightbox img {
height: 25%;
width: 25%;
}
Um die Vorschaubilder zu selektieren, wird hier in der HTML-Datei ein div mit der Klasse namens "lightbox"
verwendet,
in dem die Bilder eingefügt sind. In der Lightbox2 sind folgende zwei Attribute für die Hyperlinks auf die
Fotos vorgesehen:
data-lightbox="…" und
data-title="…"
data-lightboxMit Lightbox2 können die BenutzerInnen mehrere Bilder durchblättern,
also in Serie ansehen. Als AutorIn kann man aber mehrere Serien
vorsehen, die dann getrennt durchgeblättert werden können.
Mit data-lightbox wird festgelegt, zu welcher "Serie" von Fotos ein
Bild gehört. Für die selbe Serie wird bei jedem Bild der Serie der selbe Namen als Wert
eingefügt. Soll es auf der selben Webseite (HTML-Datei) noch eine
weitere Serie von Fotos geben, so wird für diese Serie ein anderer Name
benutzt, der wiederrum bei jedem der Bilder dieser Serie als Wert eingefügt wird.
data-titleMit data-title kann bei jedem einzelnen Bild ein individueler Text (Bildunterschrift) festgelegt werden, der von lightbox beim Anzeigen des Fotos darunter geschrieben wird.
Es gibt noch die Möglichkeit auf das Verhalten von lightbox Einfluss zu nehmen. Die Beschreibung dazu ist auf der Seite http://lokeshdhakar.com/projects/lightbox2/ im Kapitel "Options".
Im Body <body>…</body> am besten als letzte Zeile vor
</body>, also nach den Script für die lightbox
<script src="lightbox2/lightbox-plus-jquery.js"></script>
folgenden Textblock einfügen:
<script>
lightbox.option({
})
</script>
In der leeren Zeile zwischen den Klammern kann man nun Parameter-Werte-Pärchen einfügen. Welche es gibt und was sie machen steht unter "Options". Hier ein paar Beispiele, wobei die Pärchen durch Beistriche getrennt werden, die Parameter mit einfachen Anführungszeichen geschrieben werden und Texte als Wert ebenfalls mit einfachen Anführungszeichen geschrieben werden.
<script>
lightbox.option({
'albumLabel': 'Bild %1 von %2',
'fitImagesInViewport': false,
'wrapAround': true
})
</script>
Mit albumLabel kann man den Text unter den Fotos ändern, wobei %1 für
die Nummer des Bildes in der Serie steht und %2 für die Gesamtanzahl der
Bilder in der Serie.
Mit fitImagesInViewport kann man angeben, ob Fotos die größer als der
sichtbare Bildschirmausschitt sind, passend verkleinert oder in
Originalgröße angezeigt werden.
Mit wrapAround kann man angeben, ob man vom letzen Foto wieder zu ersten
weiterkommt (und von ersten Foto zurück zum letzten), oder eben nicht.
Wer möchte kann auch die CSS-Datei "lightbox.css" editieren und so einzelne Formate ändern. So kann man in der Regel mit dem Selektor ".lb-data .lb-caption" den Text vom Attribut "data-title" formatieren und in der Regel mit dem Selektor ".lb-data .lb-number" die Nummerierung darunter formatieren.
Verwendet man Vorschaubilder, so kann man diese mit CSS als Galerie formatieren. Meist wird es als ästhetisch empfunden, wenn die Bilder in "Reih und Glied" angezeigt werden: Also innerhalb einer Zeile auf gleicher Höhe und nebeneinander immer im gleichen Abstand, so dass das Bild eine Zeile darunter an der gleichen senkrechten Fluchtlinie ist und diese Bilder dadurch Spalten bilden.
Es gibt noch andere Varianten wie alle Bilder auf einen Haufen, wobei sie sich teilweise überdecken. Hierbei muss man aber aufpassen, das dies sehr schnell unangenehm ausschauen kann und schnell wenig benutzerfreundlich wird.
Sind alle Vorschaubilder gleich groß, ist es einfach sie in gleiche
Zeilen und Spalten zu bringen. Bilder (<img>) sind
Inline-Elemente und stellen sich solange nebeneinander in die Zeile, bis
eines der Bild nicht mehr hineinpasst. Dann wird der Browser automatisch
umbrechen.
Ist es nicht möglich die Vorschaubilder gleich groß zu machen, wird es schwierig die in "Reih und Glied" zu bringen. Dann kann man sie in einen Rahmen einpacken wie z.B. beim Tutorial Dias.
Eine andere Möglichkeit ist, die Vorschaubilder nicht als eine verkleinerte eins-zu-eins-Kopie der Originalbildes zu erstellen. Man kann einfach einen aussagekräftigen Ausschnitt wählen, wobei dieser bei allen Fotos das gleiche Format haben muss. Dann wird jeweils dieser Ausschnitt kleingerechnet, wodurch alle Vorschaubilder das selbe Format und die selbe Größe haben.
Bei einer typischen Breite von 960 Pixel werden üblicherweise vier bis sechs Vorschaubilder in eine Zeile passen. Hat man ein Zwei- oder Drei-Säulen-Layout für die Webseite (z.B. eine Säule für eine senkrechte Navigation), so wird sich wegen des geringeren Platzes etwas drei bis vier Vorschaubilder in eine Zeile passen. Man braucht auf alle Fälle immer einen Zwischenraum weniger als die Anzahl der Vorschaubilder in einer Zeile ist.
Beispiel: Für sechs Vorschaubildern hat man 920 Pixel Platz, weil vielleich links und rechts noch eine Rahmen mit Schatten den Inhaltsbereich einfasst. Dividiert man als erste Näherung die 920 Pixel durch 6 erhält man 153,33 als Ergebnis. Nimmt man nun eine Breite von 140 Pixel für jedes Vorschaubild, bleiben 920 − (6 × 140) = 80 Pixel für die Zwischenräume. Somit ergibt sich aus 80 ÷ 5 = 16 Pixel als Abstand.
Beispiel: Für vier Vorschaubildern hat man 920 Pixel Platz, weil vielleich links und rechts noch eine Rahmen mit Schatten den Inhaltsbereich einfasst. Dividiert man als erste Näherung die 920 Pixel durch 4 erhält man 230 als Ergebnis. Nimmt man nun eine Breite von 210 Pixel für jedes Vorschaubild, bleiben 920 − (4 × 210) = 80 Pixel für die Zwischenräume. Somit ergibt sich aus 80 ÷ 5 = 16 Pixel als Abstand. Erscheinen die Zwischenräume als zu klein, kann man die Breite der Bilder verringern, z.B. auf 200 Pixel. Dann bleiben 920 − (4 × 200) = 120 Pixel für die Zwischenräume. Somit ergibt sich aus 120 ÷ 5 = 24 Pixel als Abstand.
Beispiel: Für vier Vorschaubilder hat man wegen einer Navigation nur 640 Pixel Platz. Dividiert man als erste Näherung die 640 Pixel durch 4 erhält man 160 als Ergebnis. Nimmt man nun eine Breite von 140 Pixel für jedes Vorschaubild, bleiben 640 − (4 × 140) = 80 Pixel für die Zwischenräume. Somit ergibt sich aus 80 ÷ 3 = 26,67 Pixel als Abstand.
Für die folgenden Überlegungen gehe ich davon aus, dass in der
HTML-Datei die Bilder
der Galerie in ein div mit der id "galerie" eingebetten sind: <div
id="galerie">…</div>
Sind die Vorschaubilder auf die gewünschte Größe hingerechnet,
braucht man keine Größe in CSS formatieren. Verwendet man die
Originalbilder auch als Vorschau, muss man sie mit CSS auf die
gewünschte Größe umformatieren, z.B. auf eine Breite von 140 Pixel:
… #galerie img {width: 140px;}
Für die Zwischenräume verwendet man die CSS-Eigenschaft margin. Für
den Abstand nach unten - zur nächsten Zeile - nimmt man den selben
oder einen etwas kleineren Wert, z.B. nach rechts 16 Pixel und nach unten
14 Pixel: … #galerie img {margin: 0 16px 14px 0;}
Es ergibt sich nur ein Problem. Auch das letzte Bild in der Zeile hat
einen Außenabstand zugewiesen. Für dieses Bild war aber beim Ausrechnen der
Größen kein Zwischenraum vorgesehen. Somit wird dieses Bild auch schon
in die nächste Zeile umgebrochen werden, obwohl das Bild alleine (ohne
den rechten
Außenabstand) noch in die Zeile passen würde. Um dieses Problem
abzufangen, kann man einfach die "Länge" der Zeile um die
Größe des Zwischenraumes vergrößern. Dazu verbreitert man das
umschließende div "galerie" indem man am Ende der Zeile (also rechts) einen negativen Außenabstand
angibt: … #galerie {margin-right: -16px;}
Anmerkung: Man kann auch zur Sicherheit einen etwas größeren Wert
nehmen, falls der Browser beim Errechnen der Breiten Rundungsfehler bzw.
-ungenauigkeiten macht. Insbesondere muss man dies machen, wenn bei der Berechnung des
Außenabstands keine Ganze Zahl rauskommt. Wenn man dann z.B. 27px
anstelle von 26,67px angibt (oder auch wenn man 26,67px als Wert angibt,
kann der Browser nur ganze Pixel verwenden), wírd die Breite in Summe um
ein bis zwei Pixel breiter sein als man berechnet hat. Dann muss man den Wert des Außenabstand
um diese Größe der Rundungsfehler erhöhen, am besten gleich mit einem
entsprechenden Polster: … #galerie {margin-right: -20px;}
Wenn das div "galerie" keine Formatierungen ausweist, die optisch
sichtbar sind (Hintergrunfarbe, -bild, Rahmen oder ähnliches), so wird
man optisch keinen Unterschied erkennen. Das letzte Bild in der Zeile
wird mit der gewünschten Fluchtlinie abschließen. Sein rechter
Außenabstand (den man nicht sehen kann) ragt in den Bereich hinein, um
den das div "galerie" verbreitert wurde. Somit ist nichts von dieser
Anpassung sichtbar.
Genaueres Rechenbeispiel (anhand des dritten Beispiels von oben): Für vier Vorschaubilder hat man wegen einer Navigation nur 640 Pixel Platz. Dividiert man als erste Näherung die 640 Pixel durch 4 erhält man 160 als Ergebnis. Nimmt man nun eine Breite von 140 Pixel für jedes Vorschaubild, bleiben 640 − (4 × 140) = 80 Pixel für die Zwischenräume. Somit ergibt sich aus 80 ÷ 3 = 26,67 Pixel als Abstand. Nimmt man nun 27 Pixel als Abstand, so ergibt sich eine Gesamtbreite von: 4 × (140 + 27) = 668 Pixel. Da aber nur 640 Pixel Platz sind, muss man das div "galerie" um 28 Pixel erweitern, genauer: um 27 Pixel Außenabstand des letzten Bildes und 1 Pixel, das sich aus der Rundung des Außenabstand ergibt. Zur Sicherheit sollte man einen etwas größern Wert nehmen.
Hat man die Vorschaubilder in
einen Rahmen eingepackt, wie z.B. beim Tutorial Dias, dann sind die
Fotos eine Abfolge von div's. Das HTML-Element div ist aber ein
Blockelement und bewirkt einen Zeilenumbruch. Somit wären die Fotos
immer untereinander angeordnet, aber nicht nebeneinander. Die einfachste
Lösung ist, diese div's als inline-block zu formatieren: … #galerie
div {display: inline-block;}
Lightbox2 zeigt Bilder entweder in der Originalgröße an, oder rechnet sie so klein, dass sie in das Fenster passen - dies kann man mit der Option 'fitImagesInViewport' bestimmen.
Welche Größe man für die Originalbilder nimmt hängt von mehreren Überlegungen ab:
Daraus ergibt sich: Ein Bild sollte nur so groß sein wie nötig!
Steht im Vordergrund, dass man Bilddetails erkennt, können die Bilder auch durchaus größer sein, als eine durchschnittliche Bildschirmgröße. Dann sollte man aber die Option 'fitImagesInViewport' ausschalten, indem man ihr den Wert false für Falsch gibt - siehe oben umter Optionen für lightbox ändern.
Ist der Gesamteindruck das wichtigere, macht es keinen Sinn, die Bilder größer als die Bildschirme zu machen. Daher entscheidet man sich für eine maximale Bildschirmgröße, die man unterstützen möchte und erstellt die Bilder in dieser Größe. Die Option 'fitImagesInViewport' sollte man einschalten, indem man ihr den Wert true für Wahr gibt - siehe oben umter Optionen für lightbox ändern. Dadurch passt lightbox die Darstellungsgröße der Bilder an den jeweiligen Bildschirm an. Man sollte die Größer der Bilder aber nicht zu großzügig wählen, da der Download dann vielleicht störend lange dauert.