Verwendung

Für diese kurze Einführung werden wir eine kleine Galerieseite erstellen. Hierzu werden wir die mitgelieferte "Lytebox" verwenden.

Eine Lightbox ist ein Javascript zur animinierten Anzeigen von Bildern. Diese werden über der Webseite vor einem abgedunkelten Hintergrund angezeigt. Lightboxen werden gerne verwendet, um ein Bild in Originalgröße anzuzeigen, welches auf der Webseite in verkleinerter Form gezeigt wird. (Auf dieser Seite wird ebenfalls eine Lightbox verwendet. Um den Effekt zu sehen, klicken Sie auf das verkleinerte Bild weiter unten.)

Tipp: Unter http://plugins.onkel-franky.de/cms-websitebaker/jqueryadmin-libraryadmin/ gibt es auch noch eine kleine Anleitung zur Verwendung.

Schritt 1: Komponenten zusammenstellen

Gehen Sie im WB Backend auf den Reiter [Admin Tools] und dort auf den Link [LibraryAdmin]. Sie sehen nun die verfügbaren Komponenten und möglicherweise mehrere Reiter mit installierten Bibliotheken. (Empfehlung: Installieren Sie zusätzlich zu LibraryAdmin auch die jQuery Bibliothek. Für diese sind bereits sehr viele fertige Plugins verfügbar.)

Markieren Sie in der Spalte "Plugins" das Kästchen vor "lytebox" und geben Sie in das Eingabefeld einen Namen für das Preset an. Dieser Name wird später im Droplet verwendet. Benutzen Sie keine Sonderzeichen, sondern nur Buchstaben und Zahlen!

(Zum Vergrößern auf das Bild klicken)

Klicken Sie auf [Speichern]. Ihr neues Preset erscheint nun links in der Liste.

Schritt 2: Eine Seite erstellen

Wechseln Sie im Backend auf den Reiter [Seiten] und erstellen Sie eine neue Seite für Ihre Galerie. Als Seitentyp wählen Sie "WYSIWYG".

Fügen Sie nun einige Bilder in die neue Seite ein. Hierzu brauchen Sie jeweils zwei Versionen von jedem Bild:

  • Einen sogenannten "Thumbnail", also eine verkleinerte Version des Bildes, die auf der Seite angezeigt wird. Mögliche Maße sind etwa 100x100 Pixel (oder entsprechend, je nach Seitenverhältnis des Originalbildes).
  • Das Bild in Originalgröße.

Schritt 3: Bilder einbinden

Das Thumbnail-Bild wird als normales Bild in die Seite eingefügt. Dieses wird dann auf das Bild in Originalgröße verlinkt.

Den Thumbnail als Bild einfügenDas Originalbild als Link einfügen

Nun müssen wir noch einen kleinen Kniff anwenden. Lytebox erkennt Bilder, die es berücksichtigen soll, am Attribut "rel='lytebox'" im Hyperlink. Wenn wir aber bei den Linkeigenschaften auf den Reiter [Erweitert] wechseln und uns dort bei "Relationstyp:" die Auswahl anschauen, finden wir dort keinen Eintrag "lytebox". Daher wählen wir irgendeinen anderen Eintrag (z. B. "Alternate") und speichern den Link so ab.

Nun schalten wir den WYSIWYG-Editor auf [Quellcode] um und ändern dort den Eintrag von "alternate" auf "lytebox".

Schritt 4: Das Droplet einbinden

Nachdem nun alles vorbereitet ist, müssen wir noch irgendwie unser Preset in die Seite einbinden. LibraryAdmin installiert hierzu zwei Droplets, von denen wir jetzt eines einbinden werden. Hierzu wird einfach in die WYSIWYG-Sektion der Droplet-Aufruf eingetragen:

[[LibInclude?preset=lytebox]]

Fertig!

Nun können wir unsere neue Seite schon anschauen! Dort sehen wir nun unser Thumbnail-Bild - soweit nichts Besonderes. Wenn wir das Bild aber nun anklicken, geht unsere Lytebox auf:

Wichtiger Hinweis

Achtung, ganz wichtig!

Bei der Verwendung von externen Libraries (wie z. B. lib_jquery) muß die zu verwendende Library im Droplet-Aufruf ebenfalls angegeben werden. Beispiel:

[[LibInclude?lib=lib_jquery&preset=mypreset]]

Der richtige Aufruf wird beim Konfigurieren eines Presets immer mit angezeigt und kann per Copy&Paste übertragen werden.