Installationsanleitung für die Komponente

Wozu dient der LyteBoxFrame? Der LyteBoxFrame ermöglicht die Anzeige einer anderen Website innerhalb der Lytebox.
Nachdem Ihr die LyteBoxFrame-Komponente installiert habt, öffnet Ihr Euer NOF-Projekt, in welchem Ihr den LyteBoxFrame nutzen möchtet.  In der Arbeitsansicht findet Ihr die SwissKnife Komponenten unter den Benutzerdefinierten Komponenten im linken Bereich Eurer Arbeitsansicht. Solltet Ihr die Komponenten dort nicht finden, dann schaut bitte unter Ansicht >> Komponenten in der oberen Menüleiste, ob die Komponenten ggf. deaktiviert sind.

5a

Variante - Bild-Link

Ihr klickt zuerst einmal auf die LyteBoxFrame Komponente und im Anschluss in Euer Layout. 

6

Es öffnen sich der Platzhalter für die Komponente und die LyteBoxFrame-Eigenschaften-Palette. Hier ist unter „Betriebsart” standardmäßig der „Bild-Link” aktiviert und dabei belasst Ihr es für die erste Variante auch.

7

Bei der Betriebsart „Bild-Link” dient, wie es der Name schon sagt, ein Bild als „Auslöser” für das LyteBoxFrame. Sprich, bei Klick auf ein  Bild öffnet sich der LyteBoxFrame und zeigt die gewünschte Website an. Deshalb wählt Ihr nun im nächsten Schritt erstmal ein Bild aus. Mit einem Klick in das Eingabefeld der Zeile „Bild” erscheint ein Button mit 3 kleinen Punkten. Ihr klickt ihn an und es öffnet sich ein Fenster, in welchem Ihr zu Eurem Bild navigiert.
Ich bevorzuge es alle verwendeten Dateien zunächst von Hand in den Assetordner zu kopieren und von dort aus darauf zuzugreifen. So vermeidet man Probleme die ggf. auftreten könnten, wenn wir irgendwann mal unsere Festplatte aufräumen und Pfade zu verwendeten Dateien dabei eventuell verändert werden.
Auch in diesem Fall habe ich das gewünschte Bild bereits im Assetordner platziert und wähle es nun aus.

8

Nun sind einige Einstellungen für den LyteBoxFrame vorzunehmen. Als da wären, Breite und Höhe des Frames. Hier müsst Ihr ggf. ein wenig mit den Werten spielen und nach kurzer lokaler Publizierung entscheiden, ob Eure Einstellungen zufriedenstellend sind oder ob es einer Korrektur bedarf. In der Zeile „FRAME Scrolling” könnt Ihr entscheiden, ob innerhalb des Frames gescrollt werden darf/soll oder nicht. Unter „FRAME URL” gebt Ihr die vollständige Webadresse der Seite ein, die im Frame aufgerufen werden soll.
Um Schreibfehler zu vermeiden, ruft Ihr die Seite am besten in Eurem Browser auf und kopiert euch die Adresse aus der Browserleiste. Und zum guten Schluss könnt Ihr noch einen Titel eingeben, der oberhalb der göffneten Website im Frame eingeblendet wird.

9

Damit ist die erste Variante des LyteBoxFrames fertig eingerichtet. Einmal lokal oder fern publizieren und Ihr könnt Euer Werk bewundern.
 

Demo - LyteBoxFrame - BILD-Link

 

 

Variante - Text-Link

Der Vorgang ist zunächst der Selbe, wie beim Bild-Link, Ihr klickt einmal auf die LyteBoxFrame Komponente und im Anschluss in Euer Layout. 

6

Es öffnen sich der Platzhalter für die Komponente und die LyteBoxFrame-Eigenschaften-Palette. Ihr öffnet mit einem Klick das Pulldownmenü in der Zeile „Betriebsart” und wählt die Option „TEXT-Link” aus.
Bitte nicht wundern, in dem Moment wo die Betriebsart gewechselt wird, ändert sich der Platzhalter in den kleinen Text-Link-Platzhalter.

11

Statt ein Bild zu wählen, entscheidet Ihr bei dieser Variante, hinter welchem Text Euer LyteBoxFrame versteckt werden soll. Dieser Text erscheint dann später als Link und bei Klick auf diesen Link wird sich der LyteBoxFrame öffnen.
Alle weiteren Einstellungen sind identisch mit denen der Bild-Link-Variante.
Als da wären, Breite und Höhe des Frames. Hier müsst Ihr ggf. ein wenig mit den Werten spielen und nach kurzer lokaler Publizierung entscheiden, ob Eure Einstellungen zufriedenstellend sind oder ob es einer Korrektur bedarf. In der Zeile „FRAME Scrolling” könnt Ihr entscheiden, ob innerhalb des Frames gescrollt werden darf/soll oder nicht. Unter „FRAME URL” gebt Ihr wieder die vollständige Webadresse der Seite ein, die im Frame aufgerufen werden soll.
Und zum guten Schluss könnt Ihr auch hier wieder einen Titel eingeben, der oberhalb der göffneten Website im Frame eingeblendet wird.

12

Damit wäre auch diese Variante vorgestellt und mit einem Klick auf Demo könnt Ihr Euch ansehen, wie das Ergebnis aussehen kann.
 

Ich wünsche gutes Gelingen und viel Spaß mit der neuen LyteBoxFrame-Komponente!