Installationsanleitung für die Komponente

Die Komponente LyteBoxControl ermöglicht es uns, Einstellungen an der LyteBox aus unserer Arbeitsansicht in NOF heraus vorzunehmen. Alle die, die die LyteBox mal von Hand eingebaut haben, werden sich an das Gewühle in irgendwelchen Scripten erinnern. Die Komponente LyteBoxControl ist die Alternative hierzu.

Nachdem Ihr die LyteBoxControl-Komponente installiert habt, öffnet Ihr euer NOF-Projekt, in welchem Ihr die Lytebox nutzt oder 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

Ihr klickt nun einmal auf die LyteBoxControl Komponente und im Anschluss in Euer Layout oder in den Masterrahmen. 

6

Es öffnen sich das Komponenten-Icon und die LyteBoxControl-Eigenschaften-Palette.

Für alle die unter Euch, die mit Masterrahmen nichts anzufangen wissen: Der Masterrahmen ist eine Arbeitserleichterung in NOF.
Alle Inhalte die im Masterrahmen eingefügt werden, erscheinen auf allen Seiten, die den selben Masterrahmen verwenden, ohne dass diese Inhalte erneut eingefügt werden müssen. Im folgenden Screenshot habe ich meinen Masterrahmen rosa unterlegt, man kann aber auch für rechts und unten noch einen Masterrahmen einstellen.
Alle im Layout liegenden Inhalte werden ausschließlich auf der Seite angezeigt, auf der sie auch eingefügt wurden. Den Layoutbereich habe ich im folgenden Screenshot blassgelb unterlegt.

Was bedeutet das für die Nutzung der Komponente? Ganz einfach, legt Ihr die Komponente in den Masterrahmen, werden die vorgenommenen LyteBox-Einstellungen auf allen Seiten umgesetzt, die diesen Masterrahmen verwenden.
Legt Ihr die Komponente ins Layout, so werden die Einstellungen nur für diese eine Seite umgesetzt. Ihr könnt also für jede Seite eine eigene Control-Komponente nutzen und Eure Lytebox so auf jeder Seite individuell gestalten.

Die Komponente darf pro Seite nur 1x eingefügt werden. Das Komponenten-Icon ist nach Publizierung nicht sichtbar.

7

Nun noch eine kurze Erläuterung zu den Einstellungen, die Ihr mittels LyteBoxControl vornehmen könnt.

Themes 

Unter Themes habt Ihr die Möglichkeit zwischen 5 Farben (blau, rot, grün, grau, gold) zu wählen. Die Symbole Eurer LyteBox, wie der vorwärts-, rückwärts- und schließen-Button, werden dann in der gewählten Farbe dargestellt und auch die ausgeblendete Internetseite, die hinter der LyteBox geöffnet bleibt, wird in der gewählten Farbe eingefärbt.

Flash 

Für die Nutzer unter Euch, die z.B. eine Flash-Navigation nutzen, ist die Einstellung „FLASH verstecken”von Bedeutung, da sich bei der Auswahl „NEIN” die Flash-Navigation u.U. vor die geöffnete Lytebox schieben würde und ein Betrachten der Bilder erschweren oder gar unmöglich machen würde.

Rahmen 

Die LyteBox zeigt Eure Bilder umschlossen von einem weißen Container. Mit der Option „Rahmen aussen” habt Ihr die Möglichkeit um diesen Container nochmal einen Rahmen zu legen. Der Rahmen hat die Farbe des von Euch gewählten Themes.

Zoom 

Hier könnt Ihr auf einer Skala von 1-10 die Zoom-Geschwindigkeit festlegen. Die Zoom-Geschwindigkeit ist die Geschwindigkeit, mit der sich Euer Bild öffnet. Je niedriger der Wert den Ihr auswählt, desto schneller öffnen sich Eure Bilder.

opacity 

Unter „OPACITY” könnt Ihr auf einer Skala von 10-100 (in 10er Schritten) festlegen, wie stark die Transparenz des Lytebox-Hintergrundes sein soll. Das heißt,  wenn sich die Lytebox öffnet, so verschwindet Eure Internetseite hinter der Lytebox und wird von einem teiltransparenten Hintergrund in der Farbe Eures Themes verdeckt. So lenkt Ihr die Ausmerksamkeit des Seitenbesuchers weg vom Seiteninhalt hin zum Bild. Mit dem Wert „OPACITY” legt Ihr fest, wie stark oder schwach Eure Internetseite hinter der Lytebox durchscheinen soll. Je höher der eingestellte Wert, desto weniger wird bei geöffneter Lytebox von Eurer Seite zu sehen bleiben.

Navi 

Die Option „NAVIGATION” ermöglicht Euch zwischen zwei Formen der Navigation zu wählen. Entscheidet Ihr Euch für „OBEN”, so ist zunächst im geöffneten Bild gar keine Navigation sichtbar. Erst wenn Ihr mit der Maus in das Bild fahrt, blenden sich links und/oder rechts oben im Bild Navigationsbutton ein. Entscheidet Ihr Euch für „UNTEN”, dann fallen die Button ganz weg und es wird links unter dem Bild eine Textnavigation in der Farbe Eures Themes eingeblendet.

Skalierung 

Jeder Seitenbesucher hat einen anderen Monitor bzw. eine andere Bildschirmauflösung. Sollten Eure Bilder für einige Eurer Seitenbesucher zu groß sein, dann werden diese von der LyteBox automatisch auf die passende Größe skaliert, sofern Ihr bei dieser Einstellung „JA” gewählt habt.

Animation 

Hier könnt Ihr wählen, ob beim Öffnen des Bildes ein Fading-Effekt angewendet wir oder nicht. Bei „JA” wird das Bild weich eingeblendet, bei „NEIN” poppt das Bild einfach ohne jeden Effekt auf. Probiert den Unterschied einfach mal selbst aus.

RahmenB 

Diese Option ist z.Z. noch ohne Funktion.

dia1 

Auf einer Skala von 1-10 Sekunden könnt Ihr festegen, wie lange es dauern soll, bis in der Dia-Show von einem Bild zum nächsten gewechselt wird. Der maximale Zeitabstand beträgt 10 Sekunden, der minimale Zeitabstand 1 Sekunde.

dia2 

Möchtet Ihr Eurem Seitenbesucher die Möglichkeit geben in die Diashow einzugreifen und ggf. für ihn uninteressante Bilder von Hand zu überblättern, so könnt ihr mit der Auswahl „JA” eine Navigation zur Verfügung stellen. Entscheidet Ihr Euch für „NEIN”, steht dem User keine Navigtionsmöglichkeit zur Verfügung.

dia3 

Hier legt Ihr fest ob bei einer Dia-Show der Schließen-Button angezeigt werden soll oder nicht.
Übrigens: Die LyteShow kann auch ohne den Schließen-Button durch einen Klick in die Seite geschlossen werden.

dia4 

Links unterhalb des geöffneten Bildes erscheinen standardmäßig Angaben darüber, wieviele Bilder die Show beinhaltet und welches dieser Bilder aktuell aufgerufen wurde. Diese Anzeige könnt Ihr abwählen wenn Ihr Euch hier für „NEIN” entscheidet.

dia5 

Ihr könnt Eurem Seitenbesucher die Möglichkeit bieten, die Dia-Show mittels Pausen-Button zu unterbrechen. Diese Funktion kann insbesondere bei umfangreichen Dia-Shows sehr nützlich sein. Ihr kennt das alle, plötzlich klingelt es an der Tür...
Solltet Ihr den Pausen-Button aus irgendwelchen Gründen nicht wünschen, könnt Ihr ihn mit er Auswahl „NEIN” abwählen.

dia6 

Entscheidet Ihr euch hier für die Auswahl „JA”, so wird die Dia-Show nach Aufruf des letzten Bildes automatisch geschlossen. Wählt Ihr „NEIN” bleibt nach Ablauf der Dia-Show das zuletzt aufgerufene Bild geöffnet.

dia7 

Wenn bei klicken des Next-Button während einer Dia-Show automatisch die Dia-Show unterbrochen werden soll (Pause) so wählt Ihr hier „JA” aus, anderenfalls entscheidet Ihr Euch für „NEIN”.

dia8 

Wenn bei klicken des Prev-Button während einer Dia-Show automatisch die Dia-Show unterbrochen werden soll (Pause) so wählt Ihr hier „JA” aus, anderenfalls entscheidet Ihr Euch für „NEIN”.

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