WebTechnik - LightBox
Dieser Artikel befasst sich mit einem kostenlosem Tool. Genannt Lightbox. Um Bilder in einer Webseite beim Draufklicken groß werden zu lassen.
Das Problem
Wie baue ich große Bilder in den Text auf meiner Webseite oder in mein Design ein? Dies ist eine Frage, die sich jeder irgendwann stellt.Denn es ist schwirig ein 1024x768px großes Bild in voller Größe in seine Webseite unterzubringen.
Die Lösung: LightBox
Es erweist sich als sinnvoll, wenn man kleine Vorschaubilder für das große Bild erstellt. Diese Vorschaubilder nennt man Thumbnails - aus dem Englischen - Daumennagel.
Eine Möglichkeit wäre einen Link auf das große Bild zu setzen.
Probiere es aus - klick auf das Bild.
Eine bessere Möglichkeit wäre es LightBox einzusetzen um das Bild richtig in Szene zu setzen.
Probiere es aus - klick auf das Bild.
Wie baut man LightBox in seine Webseite ein?
Schritt 1: Download von LightBox
Als erstes müssen wir LightBox downloaden.
Download: http://www.lokeshdhakar.com/projects/lightbox2/#download
Schritt 2: Entpacken von LightBox
Wir entpacken das Archiv in den selben Ordner wo sich die Webseite befindet, in
der wir LightBox zum Einsatz bringen wollen. Im LightBox-Archiv ist schon eine
"index.html". Die soll natürlich, falls vorhanden, unsere index.html nicht ersetzen.
Schritt 3: Einbau in unsere Seite
Damit LightBox richtig arbeitet, müssen wir in unsere html-Seite ein paar Zeilen Code ergänzen.
Dieser Code wird abkopiert und so wie er ist zwischen
und in den html-Code der Seite eingefügt.Schritt 4: Das Bild richtig verlinken
Anschließend müssen wir dem Bild noch sagen, dass es sich mit LightBox öffnen soll. Dazu verwenden wir das Attribut rel="lightbox[]"
Das Bild "TN7k-DSC01706.JPG" (klein) wird angezeigt. Wenn man darauf klickt öffnet sich LightBox und zeigt das Bild "PIC7k-DSC01706.JPG" (groß)
LightBox - Taschenspielertricks
Eine Diashow mit LightBox
Alle Bilder für die Diashow muss man mit rel="lightbox[galerie1]" versehen - "galerie1" ist variabel.
Ergebnis: Man kann in der Galerie blättern indem man auf den rechten, oder den linken, Teil des Bildes klickt. Man kann auch die Pfeiltasten oder die Tasten "n" und "p", auf der Tastatur, drücken.
Eine "unsichtbare" Diashow
Vielleicht hat man 40 Bilder zu zeigen. Wenn man alle anzeigt, wäre das eine sehr lange Seite. Wenn der Besucher das Prinzip von LightBox einmal verstanden hat, dann wird er nicht auf jedes Bild klicken, sondern nur auf das erste und dann mit "NEXT" innerhalb der Galerie blättern.
Man sollte aber schon darauf hinweisen, dass man mit einem Klick - auf die rechte Bildhälfte - zum nächsten Bild kommt.
LightBox auf Deutsch
Nicht jeder spricht Englisch. Wer möchte, dass wirklich jeder in der Galerie blättern kann, der kann die Bilder "nextlabel.gif, prevlabel.gif und closelabel.gif" aus dem Ordner "images" durch andere Bilder ersetzen.
Original:
Diese Bilder gebe ich hiermit für alle Frei. Rechte Maustaste, Ziel speichern unter... und dann im "images"-Ordner ersetzen.
Deutsch:
