Lytebox Galerie in NOF einbauen - (hier erstellt mit NOF 11).

Guckt Euch die neue Lytebox-Version hier an und eine eigene Komponente SwissKnife for NOF

Hier geht es zu meiner Beispielseite mit weiteren Erklärungen.

Zunächst bitte auf den Link (unten) klicken um zu der Vorlagen-Datei mit den Skripten und einer detaillierten Beschreibung von Panda zu kommen:

zu den Skripten

Nach dem Download dieser ZIP-Datei (001-project_lytebox_nof10.zip) macht Ihr folgendes:

Jetzt macht Ihr folgendes:

In dem Skript (unten) müsst Ihr auf die richtige relative Pfad-Angabe zu dem Ordner “lyteboxscripts” achten, den Ihr ja bereits mittels FTP-Programm aus der Vorlagen-Datei auf Eurem Server in die Root kopiert habt

Solltet Ihr Lytebox in eine Eurer Unterseite einbauen wollen, dann muss diese relative Pfad-Angabe zu diesem Ordner so aussehen (zwei Punkte = gehe einen Ordner höher):

../lyteboxscripts/

Solltet Ihr Lytebox in Eure Startseite (Home) einbauen wollen, dann muss diese relative Pfad-Angabe zu diesem Ordner so aussehen (nur ein Punkt):

./lyteboxscripts/

da sich Eure Home (INDEX.HTML) ja bereits in der Root befindet.



Ich beschränke mich hier mal auf ein Beispiel zur “Lyteshow” (mehrere große Bilder werden in einer Diashow gezeigt). Bitte guckt für weitere Anleitungen auf meinen Beispiel-Seiten.



Hier habe ich dann in die HTML des “Layouts” folgenden Code (unten) eingegeben.


> Klickt auf das “Layout” > dann im Fenster “Layout-Eigenschaften” > auf den Button “HTML”.


 Dort fügt Ihr folgenden Code ein und zwar “zwischen den Head Tags”, ab NOF 11 heißt das jetzt “headInner” - 2. Button von links oben.

Achtet bitte wieder auf “../” (relative Pfadangabe zur Root), in der Home müsste dann eben nur
ein Punkt “./” davor stehen.

<script type="text/javascript" language="javascript" src="../lyteboxscripts/lytebox.js"></script>
<link rel="stylesheet" href="../lyteboxscripts/lytebox.css" type="text/css" media="screen">

Nachdem Ihr den Code (oben) in Eure Layout-HTML eingetragen habt, könnt Ihr diesem kleinen Foto dieser Gruppe einen Titel geben:

1) Titel des kleinen Foto einbauen:
(hier für die Gruppe: “unsere Katze Alina”)

> Auf das kleine Bild klicken und in dem Fenster “Bild-Eigenschaften” auf den Button

HTML

klicken

> “In dem Link” (ab NOF 11 “innen”) den Code (unten) einfügen (natürlich mit Eurem Text)
> Auf “OK” klicken

rel="lytebox" title="unsere Katze Alina"

2) Nun müsst Ihr das zu verlinkende große Foto auswählen.

> Auf das kleine Bild klicken und in dem Fenster “Bild-Eigenschaften” auf den Button

Link

klicken

> Bei Linktyp “Datei-Link” wählen

Jetzt müsst Ihr das jeweils zu dem kleinen Foto gehörenden große Foto als Datei-Links hier einfügen (siehe Bild unten), das Ihr mittels “Durchsuchen” auf Eurem PC auswählt.

Das große Foto müsst Ihr nun mit dem “Relation Attribut” der Lytebox versehen.


Dazu klickt Ihr im gleichen Fenster “Link” unten links auf den Button “HTML...”

... nun öffnet sich die “Objekt-HTML” (Bild unten). Hier gebt Ihr den unten stehenden Code “In dem Link” (ab NOF 11 “innen”) für den [Gruppennamen] (hier “alina”) ein (natürlich mit Eurem Text).
Anschließend auf “OK” klicken.

rel="lyteshow[alina]" title="Unsere Katze Alina am 07.09.2000"

... nach dem Klick auf “OK” kommt Ihr zurück in das “Link-Fenster” und Ihr klickt auf “Link” um das Foto mittels der Lytebox zu verlinken.

Die gleiche Prozedur macht Ihr nun mit den anderen kleinen Fotos auch.

Fertig.


Wer will, kann auch noch das Skript (lytebox.js) von Lytebox auf seine Bedürfnisse anpassen.

Einfach mit Eurem Windows-Editor öffnen. Hier könnt Ihr dann verschiedene Einstellungen anpassen, wie Farbe, Geschwindigkeit, etc. Natürlich müsstet Ihr dann diese Datei erneut auf den Server kopieren.

Bitte guckt dazu auch bei “Strunz”.

Da Ihr die Skripte von Lytebox in den Ordner “Lokale Publizierung” kopiert habt, könnt Ihr das auch lokal sehen.


... und noch eine Anmerkung:

Weiterhin ist mit Lytebox möglich:

> Einzelne kleine Bilder einzeln als große Bilder aufzurufen.
> Zusammenhängende Gruppen von Bildern hinter einem Piktogramm aufzurufen.
> Lytebox über einen Textlink aufrufen.
> Die Variante “Lyteframe” zu verwenden, um andere Seiten in der Box anzuzeigen.


Guckt bitte auch für zusätzliche Erklärungen auf meinen Beispiel-Seiten.



Viel Erfolg!

zurück