Lytebox 5.5 in NetObjects Fusion integrieren/einbauen - Tutorial/Anleitung


Die Lytebox ist eine schlichte aber zeitgemäße Bildgalerie, welche sich relativ einfach in NOF integrieren lässt und eine gute Alternative zur NOF-eigenen Flashgalerie darstellt, sofern keine Unmengen von Bildern präsentiert werden sollen.
(Diese Galerie wird im Gegensatz zu der NOF-eigenen Flashgalerie übrigens auch von mobilen Endgeräten wie dem iPad problemlos dargestellt.)

Für den Einbau der Lytebox in NetObjects Fusion benötigen wir zu allererst die Lytebox-Scripte und sonstige dazugehörige Dateien. Diese könnt Ihr Euch unter folgendem Link downloaden. http://lytebox.com/

 

Screen10




Die heruntergeladene zip-Datei muss zunächst entpackt werden, wobei folgender Inhalt zum Vorschein kommt:

1 Dateiordner mit dem Namen “images”

beinhaltet benötigte Grafiken wie Buttonsets

1 lytebox.css

Kaskadierendes Stylesheet-Dokument für den Style zuständig und editierbar

1 lytebox.js

JavaScript-Skriptdatei für die Funktionalität zuständig und editierbar



Im nächsten Schritt erstellen wir uns einen Ordner namens “lyteboxscripts” und verschieben den Inhalt der entpackten zip-Datei in diesen Order. Im Ordner “lyteboxscripts” befinden sich nun also der Ordner “images”, die lytebox.css und die lytebox.js.

Damit die Lyteboxdateien später dann auch ihre Funktion erfüllen können, müssen wir den Ordner “lyteboxscripts” nun noch im richtigen Verzeichnis platzieren.
Wollt Ihr die Lytebox auch offline, bei der lokalen Publizierung testen können, so muss der Ordner “lyteboxscripts” zunächst in den Ordner “lokale Publizierung” kopiert werden. Wenn Ihr euer Projekt bereits einmal lokal publiziert habt, solltet ihr im Ordner “lokale Publizierung” u.a. die Ordner “assets” und “html”  (bei Publizierung nach Assettyp-solltet Ihr bislang nicht nach Assettyp publizieren, so solltet Ihr das für die Anwendung dieses Tutorials an dieser Stelle ändern) sowie die index.html finden. Neben diesen Dateien und Ordnern platziert Ihr den Ordner “lyteboxscripts”.

 

Screen1




Um die Lytebox später auch auf Eurer Website ausführen zu können, müsst Ihr den Ordner “lyteboxscripts” natürlich auch auf Eurem Webserver platzieren. Hierzu nutzt Ihr ein FTP-Programm wie FileZilla oder SpeedCommander, wählt Euch mit euren Zugangsdaten auf Euren Server auf und fügt den Ordner im Rootverzeichnis Eures Projektes ein. Der Ordner muss dort zu finden sein, wo auch die index.html und die Ordner “assets” und “html” zu sehen sind.

 

Screen2




Im nächsten Schritt tragen wir die Verlinkungen zu den Lyteboxscripten in unser Seiten-html ein, damit diese dann später auch gefunden werden.
Da die Startseite (index.html) als einzige Seite Eures Projekts im Rootverzeichnis liegt und nicht wie alle anderen Seiten im html-Ordner, muss die Pfadangabe für die Startseite auch minimal anders lauten als für die Unterseiten. Entscheidet also nun, welchen der beiden angegeben Codeschnipsel Ihr in Eurem Projekt benötigt und kopiert ihn in Eure Zwischenablage.

 

Code für die Startseite

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

 

Code für die Unterseiten

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




Wechselt nun zu NOF, öffnet die Seite eures Projekts, auf welcher die Lytebox laufen soll und klickt einmal ins Layout der Seite oder drückt auf der Tastatur die Taste F9.
Damit werden auf der Eigenschaftenpalette die Layouteigenschaften aufgerufen. Ihr klickt nun im nächsten Schritt den html-Button auf der Eigenschaftenpalette an und es öffnet sich ein Fenster. In diesem Fenster müssen die Verlinkungen zu den Lyteboxdatein zwischen den Headtags eingetragen werden. Da sich die Ansicht dieses Fensters ab Version 11 gravierend verändert hat, werde ich im folgenden Screenshot beide Ansichten für diesen Arbeitschritt berücksichtigen.

Bei den älteren NOF-Versionen ist das Fenster zweigeteilt. Wählt in der Mitte des Fensters mit einem Klick den Reiter “Zwischen Head-Tags”  an und fügt im unteren Teil des Fensters den Code aus Eurer Zwischenablage ein. Eure Einfügung bestätigt Ihr mit einem Klick auf den OK-Button.

Bei den neueren NOF-Versionen findet Ihr am oberen Fensterrand eine Reihe kleiner Symbole. Klickt bitte das zweite Symbol an (Zwischen Head Tags) und fügt dort, wo nun der Cursor blinkt, den Code aus Eurer Zwischenablage ein. Eure Einfügung bestätigt Ihr wieder indem Ihr den OK-Button am unteren Fensterrand anklickt.

 

Screen3




Damit wären auch schon alle Vorbereitungen getroffen, um unsere Bilder mit der Lytebox-Galerie anzeigen zu lassen und wir können beginnen Bilder in unser Projekt einzufügen und mit der Lytebox zu “verknüpfen”.
Hierzu benötigen wir eine kleine und eine große Version unseres Bildes. Beginnen wir mit der Verlinkung eines einzelnen Bildes.

Mit einem Klick auf das kleine Bildsymbol gefolgt von einem Klick ins Layout öffnen wir ein kleines Fenster in welchem wir in den Assetordner unseres Projekts navigieren. 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, um es in mein Projekt einzufügen.

 

Screen4




Die hierbei häufig eingeblendete Nachfrage von NOF bestätigt Ihr bitte immer wie folgt.
 

Meldung




Wenn das Bild in Eurer Arbeitsansicht erscheint, markiert Ihr es mit einem einfachen Klick auf das Bild. Die Eigenschaftenpalette zeigt nun die Bildeigenschaften an und Ihr betätigt den Button “Link” auf der Eigenschaftenpalette. Es öffnet sich ein Fenster in welchem Ihr zunächst im oberen Pulldownmenü bei Linktyp den Datei-Link auswählt. Im Anschluss klickt Ihr den darunter liegenden Durchsuchen-Button an und navigiert zum Speicherort der Großausgabe Eures Bildes. In meinem Falle habe ich das Bild bereits wieder in den Asset-Ordner eingefügt und greife dort auf mein Bild zu.


Variante - Einzelbild
 

Screen5




Durch Betätigung des Öffnen-Button erscheint der Pfad zum Bild in der Zeile neben dem Durchsuchen-Button und wir klicken rechts davon auf speichern (1). Nun taucht der Link zum Bild bereits in der Auflistung der Dateilinks auf und sollte für den nächsten Schritt markiert (blau hinterlegt) sein (2). Mit einem Klick auf den html-Button am unteren Fensterrand (3) öffnet sich ein weiteres Fenster.
In diesem Fenster tragen wir nun “in dem Link” den für die Lytebox benötigten Code ein. Die Eingabe bestätigen wir mit OK (4) und klicken im Anschluss den Button “Link” (5) um die Verlinkung auch wirklich abzuschließen.
Die Ansicht für die Codeeinfügung unterscheidet sich wieder in den verschiedenen NOF-Versionen, deshalb habe ich im folgenden Screen wieder beide Varianten berücksichtigt.


Codeschnipsel zum Einfügen im Link-html

class="lytebox" data-title="Feuerroter Klatschmohn"



Um das Öffnen des Bildes mit der Lytebox zu erzielen, würde bereits der erste Teil des Codeschnipsels ausreichen. Den zweiten Teil muss man nur dann mit einfügen, wenn man unterhalb des Bildes einen Bildtitel anzeigen lassen möchte. Der Inhalt des Bildtitels, in diesem Fall “Feuerroter Klatschmohn” muss natürlich dem jeweiligen Bild angepasst werden. Ich habe die Bereiche im Code, die angepasst werden müssen, immer grün gekennzeichnet.

Wer das Ergebnis der bisherigen Schritte einmal testen möchte, kann im folgenden Screenshot einfach mal auf das Bild mit der Mohnblüte klicken.

clearpixel




Damit habt Ihr die Lytebox in Euer Projekt integriert und sie sollte wie im Mohnblüten-Beispiel reibungslos funktionieren.


 





Variante - Gruppe von Bildern

Nachdem Ihr nun in der Lage seid, ein einzelnes Bild mit der Lytebox darstellen zu lassen, möchte ich Euch noch kurz 1-2 weitere Verwendungsmöglichkeiten der Lytebox vorstellen und erläutern.

Wenn Ihr auf einer Seite mehrere Bilder einfügt und nach der jetzt erlernten Methode mittels Lytebox darstellen lasst, so muss der User nachdem er Bild 1 angeklickt und angeschaut hat, erst wieder die Lytebox schließen, um wieder freie Sicht auf die Bilder Eurere Seite zu bekommen und dann das nächste Bild anklicken zu können. So setzt sich das dann fort, bis der User nach und nach alle Bilder angesehen hat oder zwischenzeitlich abgebrochen hat, weil ihm das Ganze zu umständlich war.
Um diesen Prozess benutzerfreundlicher zu gestalten, gibt es die Möglichkeit Bilder in Gruppen zusammenzufassen. Hierzu wird jedem zu dieser Gruppe gehörenden Bild der selbe Gruppenname zugewiesen. Die Lytebox erkennt dann automatisch, welche Bilder zueinander gehören und eröffnet dem User die Option nach Vergrößerung des zuerst angeklickten Bildes in der geöffneten Lytebox die gesamte Bildgruppe “durchzublättern” ohne die Lytebox zwischendurch schließen zu müssen.

Die Vorgehensweise ist hierbei bis hin zum Verlinken des Bildes völlig identisch. Einzig der einzufügende Codeschnipsel unterscheidet sich bei dieser Variante etwas vom Codeschnipsel der ersten Variante, weil er um den besagten Gruppennamen erweitert werden muss.

Wenn wir mal auf das Beispiel mit der Mohnblüte zurückgreifen, muss der Code für den Link folgendermaßen aussehen. Ich habe den Teil um welchen der Code erweitert wurde rot gekennzeichnet. Der Name der Gruppe lautet in diesem Beispiel “natur” und muss für euer Projekt entsprechend angepasst werden.

Codeschnipsel zum Einfügen im Link-html

class="lytebox" data-lyte-options="group:natur" data-title="Feuerroter Klatschmohn"



Im folgenden Screenshot könnt Ihr Euch die wichtigsten Schritte nochmals vor Augen rufen. Der Screen zeigt die Verlinkung einer Gruppe von Bildern und bietet Euch bei Klick auf die im Screen befindlichen Fotos auch wieder die Möglichkeit eine Demo anzusehen.


clearpixel
clearpixel

clearpixel



Um es nochmal ganz deutlich zu machen, hier noch einmal die Codeschnipsel, die ich in die Bilder dieser Beispiel-Gruppe beim Verlinken eingefügt habe.

Code im Link-html des Klaschmohn-Bildes

class="lytebox" data-lyte-options="group:natur" data-title="Feuerroter Klatschmohn"



Code im Link-html des Zebra-Bildes

class="lytebox" data-lyte-options="group:natur" data-title="Zebra in der Mittagssonne"



Code im Link-html des Papageien-Bildes

class="lytebox" data-lyte-options="group:natur" data-title="Wunderschöner Papagei"




 




Version - Gruppe von Bildern als Lyteshow hinter nur einem Piktogramm

Wenn man relativ viele Bilder zu verschiedenen Themen präsentieren möchte, macht es Sinn, nicht für jedes darzustellenden Bild ein Piktogramm (kleine Version des Bildes) einzufügen, sondern die Bilder einer gesamten Gruppe hinter nur einem einzigen Piktogramm zu “verstecken”, so dass bei Klick auf das Mohnblumenbild alle Bilder dieser Gruppe angesehen werden können, ohne dass Bilder zunächst auf der Website sichtbar sind.

Auch bei dieser Variante sind die Schritte bis hin zur Verlinkung identisch. Aber auch dieses Mal gibt es Unterschiede beim einzufügenden Code. Zum einen ändert sich der Code der ins Link-html eingefügt wird.

Code zum Einfügen im Link

class="lyteshow" data-lyte-options="group:natur" data-title="Feuerroter Klatschmohn"



Und zum zweiten müssen dieses Mal alle Bilder, die zusätzlich ohne ein eigenes Piktogramm angezeigt werden sollen, von Hand als Links eingetragen werden. Die zusätzlichen Links werden nicht im Link, sondern “nach dem Link” eingetragen. Der Code für jeden weiteren Link sieht wie folgt aus:

Code zum Einfügen nach dem Link (bei Einsatz der Lytebox auf der Startseite)

<a href="./assets/images/zebra.jpg" class="lyteshow" data-lyte-options="group:natur" data-title="Zebra in der Mittagssonne"></a>



Code zum Einfügen nach dem Link (bei Einsatz der Lytebox auf einer Unterseite)

<a href="../assets/images/zebra.jpg" class="lyteshow" data-lyte-options="group:natur" data-title="Zebra in der Mittagssonne"></a>




Auch bei dieser Version könnt ihr Euch eine Demo ansehen, wenn ihr auf das Bild im folgenden Screenshot klickt.

clearpixel




Zu erwähnen bleibt noch folgendes: Da bei der letzten Version die Verlinkung zu den zusätzlichen Bildern nicht direkt über NOF, sondern viel mehr von Hand erfolgt, befinden sich die Bilder auch nicht automatisch in unserem Projekt und müssen deshalb ebenso wie die Lyteboxscripte von Hand auf den Server und in den Ordner lokale Publizierung kopiert werden. In beiden Fällen gehören die Bilder in den Ordner assets > images

Viel Spaß! :-)

 


Projekt Vorlage- NOF9     - Lytebox-Galerie in NOF    ZIP/1,97 MB

Projekt Vorlage- NOF10   - Lytebox-Galerie in NOF    ZIP/1,98 MB

Projekt Vorlage- NOF11   - Lytebox-Galerie in NOF    ZIP/1,98 MB

Projekt Vorlage- NOF12   - Lytebox-Galerie in NOF    ZIP/1,99 MB                                  Wie öffne ich die Vorlage richtig und verlustfrei?
 

 

Die Seite ist zwar nicht extrem groß, aber ich habe bei den Screenshots sehr großen Wert auf Qualität gelegt und somit kann der Seitenaufbau je nach Verbindung schonmal recht zähflüssig laufen.

 


>>  NOF-Academy - Anleitungen, Tutorials, Templates, Vorlagen, Workshops, Online-Support & Hotline für NetObjects Fusion  <<

Das könnte dich auch interessieren:

Informationen und Demos zu SwissKnife for NOF - Gratis Komponenten für NetObjects Fusion
Eine horizontale CSS-Navigation mit NetObjects Fusion erstellen
Eine vertikale CSS-Navigation mit NetObjects Fusion erstellen
Eine einfache CSS-Klapp-Navigation in NetObjects Fusion
Eine Homepage für mobile Geräte mit NetObjects Fusion
Zusätzliche Assets in NetObjects Fusion (NOF) einbinden
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
OverLib in NetObjects Fusion einbinden - Schritt für Schritt erklärt
Ein fixierter Hover-Button am Bildschirmrand
CSS Sticky Footer in NetObjects Fusion