Installationsanleitung für die Komponente

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


Ihr klickt nun einmal auf die LyteBox Komonente und im Anschluss in Euer Layout. 

6

Es öffnen sich der Platzhalter für die Komponente und die Lyteboxeigenschaften-Palette. Hier klickt Ihr nun zunächst in die Zeile „Bild”, und auf den kleinen Würfel mit den drei Punkten. Es öffnet sich ein Fenster, in welchem Ihr zu der kleinen Version Eures Bildes, welche in der Seite eingefügt werden soll, 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.

7

Wenn das Bild in der Arbeitsansicht erschienen ist, klickt Ihr in die nächste Zeile „LyteBox-Bild” und wieder auf die 3 Pünktchen. Der Vorgang ist der Selbe, wie zuvor, nur dass Ihr dieses Mal die große Version Eures Bildes auswählt, welche in der Lytebox dargestellt werden soll.

8

Nun könnt Ihr, wenn Ihr wollt, in der Zeile „LyteBox-Titel” noch einen Titel für Euer Bild eingeben. Der Titel wird in der geöffneten LyteBox links unterhalb des Bildes angezeigt.

9

Damit ist die Lytebox für das Klatschmohnbild fertig eingerichtet. Einmal lokal oder fern publizieren und Ihr könnt Euer Werk bewundern.

Demo - Einzelbild

 

 

Variante - Bilder-Gruppe

Der Vorgang ist zunächst der Selbe, wie beim Einzelbild, Ihr klickt einmal auf die LyteBox Komonente und im Anschluss in Euer Layout. 

10

Es öffnen sich der Platzhalter für die Komponente und die Lyteboxeigenschaften-Palette. Hier klickt Ihr nun zunächst in die Zeile „Bild”, und auf den kleinen Würfel mit den drei Punkten. Es öffnet sich ein Fenster, in welchem Ihr zu der kleinen Version Eures Bildes, welche in der Seite eingefügt werden soll, navigiert.  Ihe wählt das gewünschte Bild aus und klickt auf „Öffnen”.

11

Wenn das Bild in der Arbeitsansicht erschienen ist, klickt Ihr in die nächste Zeile „LyteBox-Bild” und wieder auf die 3 Pünktchen. Der Vorgang ist der Selbe, wie zuvor, nur dass Ihr dieses Mal die große Version Eures Bildes auswählt, welche in der Lytebox dargestellt werden soll.

12

Nun öffnet Ihr mit einem Klick das Pulldownmenü in der Zeile „Betriebsart” und wählt die Option „Bilder-Gruppe” aus.

13

Damit die Lytebox später weiß, welche Bilder zu welcher Gruppe gehören, muss nun in der Zeile „Gruppen-Name” ein entsprechender Gruppenname vergeben werden. Es ist dringend darauf zu achten, dass die Schreibweise des Gruppennamen bei allen zur Gruppe gehörenden Bilder immer absolut identisch ist.

14

Da man aus einem Bild keine Gruppe machen kann, benötigen wir nun ein weiteres Bild. Hierzu klickt Ihr erneut die LyteBox Komponente an und klickt wieder in Euer Layout.

15

Es öffnet sich - wie Ihr es bereits vom ersten Bild kennt - der Platzhalter und Ihr wiederholt für das zweite Bild die nötigen Arbeitsschritte.

16

Am Ende sollte in der Eigenschaftenpalette die „Bild-Gruppe” ausgewählt sein, es sollten die Pfade zu den beiden Bildversionen erscheinen, ein passender Bildtitel kann aber muss nicht eingetragen sein und der Gruppenname sollte auf jeden Fall in identischer Schreibweise eingetragen sein.

17

Und weil zwei Bilder ein Bild-Paar sind, aber keine Gruppe, wiederholt Ihr den kompletten Vorgang noch für ein drittes Bild, ohne dass ich dies näher ausführen werde. Wenn Ihr nun Eure Seite publiziert, und eins eurer Bilder anklickt, habt Ihr die Möglichkeit in der geöffneten Lytebox in der Bildergruppe vor und zurück zu blättern.

18

Demo - Bilder-Gruppe

 

     

 

 

Variante - DIA-Show

Für die Variante „DIA-Show” geht Ihr absolut genauso vor, wie für die Variante „Bilder-Gruppe”, außer dass Ihr diesmal in der Zeile „Betriebsart” für alle zur Show gehörenden Bilder die Auswahl „DIA-Show” trefft.
Wenn Ihr eure Seite publiziert und eins der Bilder anklickt, öffnet sich die Lytebox und blendet nacheinander ein Bild nach dem anderen ein, ohne dass der Betrachter erneut klicken muss.

19

Demo - DIA-Show

 

     

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

 



Hier können die SwissKnife for NOF Komponenten und Updates kostenlos heruntergeladen werden!

Übrigens, Support zu allen SwissKnife for NOF-Komponenten gibt es von SwissKnife - dem Entwickler der Komponenten - persönlich.
Nur in der NOF-Community!


Das könnte dich auch interessieren:

Installationsanleitung für SwissKnife for NOF
LyteBoxTextLink-Komponente - Tutorial zum Umgang mit der Komponente
LyteBoxControl-Komponente - Tutorial zum Umgang mit der Komponente
LyteBoxFrame-Komponente - Tutorial zum Umgang mit der Komponente
DocType-Komponente - Tutorial zum Umgang mit der Komponente
ZufallsBild-Komponente - Tutorial zum Umgang mit der Komponente


Eine Homepage für mobile Geräte mit NetObjects Fusion
Zusätzliche Assets in NetObjects Fusion (NOF) einbinden
OverLib in NetObjects Fusion einbinden - Schritt für Schritt erklärt
Ein fixierter Hover-Button am Bildschirmrand
CSS Sticky Footer in NetObjects Fusion
Bildbearbeitung mit GIMP für Anfänger - Schritt für Schritt erklärt
Die Assetverwaltung in NetObjects Fusion aufräumen
WOW-Slider in NetObjects Fusion einbinden - Schritt für Schritt erklärt
Ein spamsicheres Formular für deine Website mit NetObjects Fusion
Google-WebFonts in deine NetObjects Fusion Website einbinden