für NOF ( Netobjects Fusion )

Lytebox.css

• lbOverlay
  Bildschirm Hintergrund

• lbOuterContainer
  oberer Container (Bild)

• lbDetailsContainer
  unterer Container (Beschreibung)

• lbLoading
  Loading Grafik

• lbPrev
  Zurück Button (Grafik)

• lbNext
  Weiter Button Grafik)

• lbPrev2, lbNext2
  Text Navi

• lbPrev2_Off, lbNext2_Off
  Text Navi

Als einfachste Möglichkeit, das Aussehen der Lytebox zu ändern,
hat man die Möglichkeit, zwischen 5 verschiedenen Themen zu wählen.
Theme: grey, red, green, blue oder gold.
Dadurch werden Einstellungen wie z.B.: Overlay, Buttons automatisch geändert.

In diesem Tutorial wird ausschließlich
das Theme: “ grey ” bearbeitet !!! ( Lytebox.css )

Änderungen in der Lytebox.js sind Themenunabhängig !
 

Lytebox “theme”
 

In der Datei Lytebox.css sind 5 verschiedene Themes definiert, die das Aussehen der Lytebox bestimmen.
Darunter fällt z.B. die Overlay / Hintergrundfarbe vom Bildschirm
bzw. die Buttons zum weiterblättern bei einer Lyteshow.
Die Wahl des Themes findet Ihr in der Lytebox.js / Zeile 30 this.theme= 'grey';

Zum ändern des Themes einfach das grey mit red green blue oder gold ersetzen.

 

Overlay / Lytebox Hintergrund
 

Die Bezeichnung “Overlay” steht für die Abdunklung des Bildschirmes während die Lytebox angezeigt wird.
Hier kann man eine Farbe (z.B. #000 = schwarz) und die Transparenz einstellen.

Overlay-Farbe ist einzustellen in der lytebox.css / Zeile 2
#lbOverlay.grey { background-color: #000000; }
Entnehmt den Farbcode eurem Grafikpogramm oder z.B. hier (Farbcodes)

Overlay-Transparenz ist einzustellen in der lytebox.js / Zeile 34
this.maxOpacity= 80;
Einen Wert 0 - 100 eingeben.
0 = kein Overlay
50 = 50% Transparenz / Deckkraft
100 = keine Tranparenz / volle Deckkraft

hideFlash / Flash-Objekte ausblenden
 

Wenn sich Flash-Objekte auf eurer Seite befinden,
werden diese normalerweise für die Dauer der Lytebox ausgeblendet.
Bei mir kam es schon mal, nach Deaktivierung, vor, dass dann nicht der komplette Bildschirm
abgedunkelt wurde und die Flash-Objekte sichtbar blieben. Sah nicht so toll aus.
Deswegen sollte diese Funktion aktiviert sein / bleiben.
Zu finden in der Lytebox.js / Zeile 31 this.hideFlash= true;

 

outerBorder / äußerer Rahmen
 

Wie hier zu sehen - 1px grau.
Es gibt die Möglichkeit diesen Rahmen separat anzeigen zu lassen oder eben nicht.
Diese Anweisung findet Ihr in der Lytebox.js / Zeile 32 this.outerBorder= true;

true = Rahmen wird angezeigt / false = Rahmen wird nicht angezeigt

Wie Ihr den Rahmen umgestalten könnt
steht in der Beschreibung für lbOuterContainer bzw. lbDetailsContainer

 

resizeSpeed / Skalierungsgeschwindigkeit
 

Steuert die Geschwindigkeit der Skalierung der Bilder.
Das heißt, Bilder mit größeren Maßen (Breite/Höhe) als das Browserfenster,
müssen skaliert werden, da sich die Lytebox in unveränderter Grundeinstellung
an die Größe des Browserfensters anpasst.
Diese Einstellung ist zu finden in der Lytebox.js / Zeile 33 this.resizeSpeed= 8;

Je höher der Wert, desto schneller wird skaliert. (Wert 0-10)

 

navType / Navi-Typ
 

Es gibt die Möglichkeit, zwischen 2 Navi-Typen zu wählen.
Typ 1 = Grafikbuttons
Typ 2 = Text Navi

Diese Einstellung ist zu finden in der Lytebox.js / Zeile 35 this.navType= 1;

Also...hier im Code nur 1 oder 2 ändern.

 

autoResize / automatische Größe der Lytebox
 

Diese Anweisung betrifft nur die Lytebox. Nicht den Lyteframe !
Da der Lyteframe seine Maße gesondert erhält. z.B.:
rel="lyteframe" rev="width: 250px; height: 250px;"

Eine weitere Einstellungsmöglichkeit - autoResize.
autoResize bedeudet, dass sich die Lytebox an die Größe / Auflösung des Bildschirmes anpasst.
Natürlich nur, wenn es notwendig ist.

Ein kl. Beispiel:
Es soll ein Bild, mit den Maßen 1000px Breite x 1000px Höhe in der Lytebox dargestellt werden.

User 1 - Auflösung 1024 x 768 -> Lytebox skaliert das Bild an die größtmöglichen Bildschirmmaße

User 2 - Auflösung 1680 x 1080 -> Lytebox skaliert das Bild nicht,
da die Auflösung genug Platz bietet, das Bild in Originalgröße darzustellen.

Bei “normalen” Bildern sollte diese Funktion aktiviert sein.
Bei Bildern mit integriertem Text, techn. Zeichnungen oder Diagrammen oder, oder...
kann man diese Funktion deaktivieren. Das heißt, das Bild wird dann in Originalgröße dargestellt.
Denn bei einer Skalierung des Bildes, wird der Text natürlich mit skaliert
und ist dann nicht mehr so gut lesbar.

Diese Einstellung ist zu finden in der Lytebox.js / Zeile 36 this.autoResize= true;

true = automatische Größe aktiviert / false = automatische Größe deaktiviert

 

doAnimations / Fade-Effekt
 

Bei der Lyteshow wird ein Fade-Effekt angewendet.
Das heißt, die Bilder werden leicht ein- bzw. wieder ausgeblendet.
Wer das bei seiner Lytebox/Lyteshow nicht mag, kann diese Funktion auch deaktivieren.

Diese Einstellung ist zu finden in der Lytebox.js / Zeile 37 this.doAnimations= true;

true = Fade-Effekt aktiviert / false = Fade-Effekt deaktiviert

 

slideInterval
 

Hier wird festgelegt, wie lange ein Bild angezeigt wird. (Lyteshow).
Die Angabe der Zeit (slideInterval) erfolgt in Millisekunden.

1000 = 1 Sekunde
4000 = 4 Sekunden
10000 = 10 Sekunden

Diese Einstellung findet Ihr in der Lytebox.js / Zeile 43 this.slideInterval= 6000;

showNavigation
 

Einstellung für die Sichtbarkeit der Navigation.
Diese Einstellung betrifft beide Navi-Typen !!!

Zu finden in der Lytebox.js / Zeile 44 showNavigation= true;

true = Navigation wird angezeigt / false = Navigation wird nicht angezeigt.

 

showClose
 

Hier hat man die Möglichkeit, den Close-Button (Schliessen-Button) rechts unten,
anzeigen zu lassen oder eben nicht.

Zu finden in der Lytebox.js / Zeile 45 showClose= true;

true = Close-Button wird angezeigt / false = Close-Button wird nicht angezeigt.

 

showDetails
 

Hier gibt es die Möglichkeit, die sogenannten Details der Lytebox
ein- bzw. auszublenden..

zu den Details gehören:
title = mal ein anderes Lytebox-Design
Bildcounter = Bild 2 von 8
Text-Navi (Navi Typ 2) = zurück || weiter

Achtung:

Die Text-Navi wird beim ausblenden der Details ebenfalls nicht mehr angezeigt.
Die Navi-Buttons (Navi Typ 1) werden angezeigt.

Zu finden in der Lytebox.js / Zeile 46 showDetails= true;

true = Details werden angezeigt / false = Details werden nicht angezeigt.

 

showPlayPause
 

Ebenfalls kann man bei der Verwendung der Lyteshow bestimmen,
ob der Play-Pause Button angezeigt wird oder nicht.

Zu finden in der Lytebox.js / Zeile 47 showPlayPause= true;

true = Play/Pause Button wird angezeigt / false = Play/Pause Button wird nicht angezeigt.

 

autoEnd
 

Hinweis: diese Anweisung betrifft nur die Lyteshow !

Bei der Anweisung “autoEnd” hat man die Möglichkeit, einzustellen, ob die Lyteshow
nach dem letzten Bild automatisch geschlossen wird, oder der Close-Button geklickt werden muss.

Zu finden in der Lytebox.js / Zeile 48 autoEnd= true;

true = Lyteshow schliesst automatisch / false = Lyteshow bleibt offen.

 

pauseOnNextClick

Hinweis: diese Anweisung betrifft nur die Lyteshow !

Wenn man bei einer automatisch laufenden Lyteshow auf den Button
“vor” bzw. “next” klickt, kann man hier einstellen, ob die Lyteshow-Funktion
pausiert oder weiterläuft.

Diese Einstellung gilt für beide Navi-Typen (Text oder Buttons).

Zu finden in der Lytebox.js / Zeile 49 this.pauseOnNextClick= true;

true = Lyteshow pausiert / false = Lyteshow läuft weiter

 

pauseOnPrevClick

Hinweis: diese Anweisung betrifft nur die Lyteshow !

Wenn man bei einer automatisch laufenden Lyteshow auf den Button
“zurück” bzw. “prev” klickt, kann man hier einstellen, ob die Lyteshow-Funktion
pausiert oder weiterläuft.

Diese Einstellung gilt für beide Navi-Typen (Text oder Buttons).

Zu finden in der Lytebox.js / Zeile 50 this.pauseOnPrevClick= true;

true = Lyteshow pausiert / false = Lyteshow läuft weiter

 

Beschriftung Text-Navi (Navi-Typ 2)

In der originalen Lytebox.js ist die Beschriftung in Englisch. ( « prev || next » )
Wer möchte, kann das natürlich ändern.

Hier könnte z.B. stehen:
zurück || weiter

Desweiteren könnte man auch nur Symbole / Sonderzeichen anstatt des Textes
zur Navigation verwenden.
Hierfür müssten dann die entsprechenden Codes in html eingetragen werden.
Wie Ihr seht, steht so ein Code schon vor bzw. nach “prev” / “next”, nämlich:

« = « / » = »

Hier mal eine Übersicht der Codes
Bei einer Verwendung kopiert Ihr euch den entsprechenden Code ( Name in html )
und ersetzt damit den jetzigen Code: « prev / » next

Diese Änderung macht Ihr in der Lytebox.js / Zeile 337

Beschriftung Bild-Counter

In der originalen Lytebox.js ist die Beschriftung des Bild-Counters in Englisch ( Image 1 of 5 )
Diese Beschriftung könnt Ihr natürlich auch ändern.

Hier kann z.B. stehen:
Bild 1 von 5
Foto 1 von 5
oder was Euch gefällt.

Diese Änderung macht Ihr in der Lytebox.js / Zeile 489