Tutorial Einbau einer Lightbox mit JavaScripts und CSS von NetObjects Fusion

... nach einer Anleitung von NetObjects Fusion

Bitte ladet Euch zunächst diese beiden JavaScripts von meinem Server herunter:

Klickt mit der rechten Maustaste auf die Links und wählt “Ziel speichern unter” oder ruft den Link auf und wählt im Menü > Datei > Seite speichern unter

Kopiert beide .js Dateien in Euer Verzeichnis “Assets” Eures Projektes und lest beide Dateien in NOF ein:

> Layout markieren > Fenster Layout-Eigenschaften > mittlere Button > Reihenfolge beim Skriptimport

Skript Import

Entscheidet dabei, ob die Skripte Site-übergreifend, im verwendeten Master-Rahmen oder nur Seitenspezifisch angelegt werden sollen.

Skript Einstellungen

Zieht Euch Euer Bild (wählt eine Größe, wie es später in der Lightbox erscheinen soll) an einer freien Stelle im Layout auf. Meine Bilder haben hier z.B. eine Größe von 816 x 612 Pixeln (im Screenshot unten bereits verkleinert). Klickt nun auf den 2. Button “Geometrie” der Bild-Eigenschaften um Euer Bild als Thumbnail zu verkleinern. Ich habe hier eine Breite von 200px gewählt. Setzt bei Größenverhältnis beibehalten ein Häkchen, damit das Bild nicht verzerrt.

Bildgröße

Tragt am 1. Reiter “Allgemein” der Bild-Eigenschaften Euren “Alt. Text” ein, der später als Untertitel in der geöffneten Lightbox erscheinen wird. Ihr könnt auch Umlaute und Sonderzeichen für diesen Text verwenden. Ganz wichtig ist, dass Ihr bei Einstellungen (Nicht optimiert) verwendet, sonst wird die Lightbox sich nicht öffnen.

Bildeigenschaften

Fügt nun Eure CSS für die Lightbox in der Design-Ansicht von NOF unter dem Reiter “CSS-Code” ein. Diese CSS-Klassen könnt Ihr beliebig an Eure Bedürfnisse anpassen. Ich habe hier z.B. als Farbe zur Abdunklung Schwarz, mit einer Deckkraft von 60%, gewählt und den Cursor geändert.

#imagelightbox {
position:fixed;
z-index:9999;
cursor:pointer;
-ms-touch-action:none;
touch-action:none;
}

#imagelightbox-overlay {
background-color:rgba(0,0,0,.6);
position:fixed;
z-index:9998;
top:0;
right:0;
bottom:0;
left:0;
}

#imagelightbox-caption {
text-align:center;
color:#fff;
background-color:#666;
position:fixed;
z-index:10001;
cursor:pointer;
left:0;
right:0;
bottom:0;
padding:.625em;
}

In der Design-Ansicht den obigen CSS-Code an beliebiger und freien Stelle einfügen

Lightbox CSS

Jetzt könnt Ihr Eure Seite lokal oder entfernt publizieren und alles sollte bereits funktionieren.

Falls Ihr Euch wundert, warum meine kleinen Thumbnails runde Ecken und einen Schatten haben, hier noch diese zusätzlichen Einstellungen, die aber mit der Lightbox selbst nichts zu tun haben.

Markiert das jeweilige Bild, öffnet die CSS-Eigenschaften und tragt z.B. im Bereich “Feld” ein:

  • 1px 2px 5px #888888 (für den Schatten bei “box-shadow”)
  • 5px (für die runden Ecken bei “border-radius”)
Thumbnail CSS

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik