HTML/Tutorials/Lightbox einbinden

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Tutorial lernen Sie, wie Sie die beliebte Bildergalerie Lightbox in Ihre Webseite einbinden.

  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Sie benötigen nur:

  • das kostenloses Lighbox-zip
  • einige Bilder
  • kleine Vorschauansichten Ihrer Bilder (thumbnails)


Beachten Sie: Die Version 2 dieses Scripts benötigt jQuery2 und funktioniert in allen Browsern und im Internet Explorer ab Version 9.


[Bearbeiten] Download von Lightbox

Lightbox können Sie auf folgender Website runterladen: http://www.lokeshdhakar.com/projects/lightbox2/

  • Klicken Sie dann auf „Download“.
  • Entpacken Sie die zip-Datei und Sie erhalten:

Screenshot der im Zip-Ordner enthaltenen Dateien

Einbinden der CSS-Datei

  • Öffnen Sie den /dist-Ordner und kopieren Sie die Datei lightbox.css aus dem CSS-Ordner in Ihr CSS-Verzeichnis
  • Kopieren Sie folgende Zeile in den Head Ihrer Webseite:
Beispiel: Einbinden der CSS-Datei
 <link href="ihr-css-verzeichnis/lightbox.css" rel="stylesheet">


Einbinden der JavaScript-Datei

  • Kopieren Sie folgende Zeile in die letzte Zeile vor den schließenden </body>-Tag:
Beispiel: Einbinden des Scripts
 <script src="ihr-js-verzeichnis/lightbox.js"></script>


Beachten Sie: jQuery muss vor dem Lightbox-Script geladen werden.

[Bearbeiten] HTML

Das Lightbox-Script verwendet Data-Attribute, um dem Script benötigte Informationen zur Verfügung zu stellen.

Jeder Link zu einem Bild benötigt ein data-lightbox-Attribut mit einem individuellen Namen für jede Animation. Wenn Sie mehrere Bilder in einer Dia-Show verwenden wollen, müssen Sie ihnen gleiche data-lightbox-Attribute geben. Zusätzlich können Sie in einem data-title-Attribut Text für eine Bildunterschrift angeben.

Beispiel: Einbinden eines Bildes
 <a href="images/bild-1.jpg" data-lightbox="bild-1" data-title="Bildunterschrift">
   <img src="images/bild-1-vorschau.jpg" alt="alternative Erklärung">
 </a>
Beispiel: Einbinden mehrerer Bilder in einer Dia-Show
 <a href="images/bild-2.jpg" data-lightbox="show-1" data-title="morgens"><img src="images/bild-2-vorschau.jpg" alt="alternative Erklärung"></a>
 <a href="images/bild-3.jpg" data-lightbox="show-1" data-title="mittags"><img src="images/bild-3-vorschau.jpg" alt="alternative Erklärung"></a>
 <a href="images/bild-4.jpg" data-lightbox="show-1" data-title="abends "><img src="images/bild-4-vorschau.jpg" alt="alternative Erklärung"></a>
Empfehlung: Achten Sie darauf, dass sich Vorschaubilder und Großansichten in den richtigen Verzeichnissen befinden und diese passend referenziert werden.

[Bearbeiten] Optionen

Es gibt zusätzlich mehrere Einstellungsmöglichkeiten, mit den Sie das Lightbox-Script individuell verändern können. Dazu müssen Sie nach dem Laden des Scripts die option-Methode aufrufen, in der die Optionen mit ihren Werten angegeben werden.

Beispiel: individuelle Einstellungen
<script src="ihr-js-verzeichnis/lightbox.js"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>
Option Standardwert Beschreibung
alwaysShowNavOnTouchDevices false Wenn Sie true setzen, werden die Navigationspfeile, die sonst bei :hover erscheinen, auf Touchgeräten immer sichtbar
fadeDuration 500 Zeitangabe in Millisekunden, wie lange der Overlay zum Ein- und Ausblenden braucht
fitImagesInViewport true Wenn Sie true setzen, werden übergroße Bilder automatisch an den Viewport angepasst. Dies erspart Benutzern das Scrollen.
maxWidth Längenangabe in Px, legt Bildbreite fest
Beachten Sie: Das Seitenverhältnis der Bilder wird nicht mehr berücksichtigt!
maxHeight Längenangabe in Px, legt Bildhöhe fest
Beachten Sie: Das Seitenverhältnis der Bilder wird nicht mehr berücksichtigt!
positionFromTop 50 Längenangabe in Px, legt Abstand zum oberen Rand des Viewports fest
resizeDuration 700 Zeitangabe in Millisekunden, wie lange der Lightbox Container für Übergänge zwischen den einzelnen Bildern benötigt
showImageNumberLabel true Wenn Sie false setzen, werden Nummer und Gesamtanzahl der Bilder (z.B.: "image 2 of 4") nicht mehr angezeigt
wrapAround false Wenn Sie true setzen, wird am Ende der Animation zum ersten Bild zurückgegangen

Alternativ können Sie direkt in das JavaScript eingreifen und dort Änderungen vornehmen:

Beispiel: lightbox.js Zeile 39-52
  1.   // Descriptions of all options available on the demo site:
  2.   // http://lokeshdhakar.com/projects/lightbox2/index.html#options
  3.   Lightbox.defaults = {
  4.     albumLabel: 'Image %1 of %2',
  5.     alwaysShowNavOnTouchDevices: false,
  6.     fadeDuration: 500,
  7.     fitImagesInViewport: true,
  8.     // maxWidth: 800,
  9.     // maxHeight: 600,
  10.     positionFromTop: 50,
  11.     resizeDuration: 700,
  12.     showImageNumberLabel: true,
  13.     wrapAround: false
  14.   };
Empfehlung: Ändern Sie den Wert von albumLabel in Zeile 42 auf 'Bild %1 von %2'. Die Variablen mit den Prozentzeichen werden später durch laufende Nummer und Gesamtzahl ersetzt.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML