Tutorial and Template © 2007 by 
 Deutsche Version  English Version
Mehr Tutorials:
Template Download Kontaktformular NOF 9 & 10
Verschiedenfarbige Links nach Webstandard Templates NOF 7.5, 8 , 9, 10
Overlib Aktionen in NOF NetObjects Fusion - Templates, Vorlagen NOF 7.5, 8, 9, 10
PREVIEW: Einbindung Flash Player in NOF (Pop-up Fenster)
Deutschlands größtes NOF NetObjects Fusion - Support & Experten Forum
Updates
15.08.07 Vorlage/Template jetzt auch für NOF 9
10.08.07 Master-Rahmen Erklärung
01.08.07 Englische Version
23.07.07 Das Ärgernis - Internet Exlplorer 6
21.07.07 Neues PDF File zum offline Gebrauch
20.07.07 Update der Vorlage NOF 10
Der Einbau einer lytebox Galerie in NOF NetObjects Fusion
Alle notwendigen Scripte sind bereits in den zip Dateien vorhanden.
Download Vorlage NOF 9
Download Vorlage NOF 10
Download Tutorial als PDF (233kb)
Wenn ihr NetObjects Fusion 11 mit dem Doctype XHTML nutzt, dann lest bitte hierzu bitte diesen Thread im Forum.
Auf Grund eines Bugs im IE8 werden die Buttons der lytebox nicht angezeigt. Den nötigen Fix dafür zeigt euch der Link.
Diese Seite drucken
Die Download Vorlage für NOF 10 und NOF 9 (.zip) enthälten jeweils 2 Dateien.
- Ein Vorlagen .zip Datei, welche wie gewohnt über die Funktion
Online Ansicht-->Bestehende Site öffnen-->Aus Vorlage öffnen als neues Projekt abgespeichert wird.
- Einen Ordner “Lokale Publizierung” welcher einfach in das Projektverzeichnis kopiert wird, welches man aus der Vorlage erstellt hat. In diesem Ordner liegen die lyteboxscripts und Bilder die benötigt werden um dieses Tutorial korrekt auf jedem Rechner anzuzeigen.
Bei lytebox handelt es sich um eine Modifikation des populären lightbox scripts.
Der Vorteil der lytebox liegt in der einfachen Handhabung, bei weniger .js Files und der Möglichkeit
Bilder Gruppen und Slideshows zu verwenden.
Der Einbau in ältere Versionen von NOF NetObjects Fusion erfolgt nach exakt dem selben gezeigten Prinzip.
Vorbereitung zur Einfügung der “lytebox” in NOF NetObjects Fusion
Wir erstellen folgenden Ordner in deinem Projektverzeichnis unter “Lokale Publizierung”:
Neuer Ordner “lyteboxscripts” im Verzeichnis Lokale Publizierung, also dort wo auch der Ordner “html” und “assets” liegt.
Jetzt entpacken wir die .zip Datei des lytebox Downloads und kopieren die Dateien:
lytebox.css und lytebox.js in den erstellten Ordner “lyteboxscripts”.
In der .zip Datei finden wir auch den Ordner “images” diesen kopieren wir nun ebenfalls in das Verzeichnis ”lyteboxscripts”.
Darin enhalten sind die Navigationsbuttons für die Anwendung lytebox.
Die Einfügung der “lytebox” scripts in NOF NetObjects Fusion
In der “Masterrahmen Eigenschaften” Palette mit einen Klick auf den Button “HTML” das Dialogfeld aufrufen, dort geben wir folgendes ein “zwischen den Head Tags”:
LYTEBOX soll auf der HOME (index.html) laufen
<script type="text/javascript" language="javascript" src="lyteboxscripts/lytebox.js"></script>
<link rel="stylesheet" href="lyteboxscripts/lytebox.css" type="text/css" media="screen">
ACHTUNG (!)
Liegt die Seite auf welcher lytebox laufen soll NICHT im Root Verzeichnis (dort wo die index.html liegt),
sondern ist eine Unterseite im Ordner “html”, dann muss die Pfadangabe zum Script entsprechend geändert werden!
Das bedeutet auch, dass Ihr der Seite “Home” (index.html) einen eigenen Master-Rahmen zuweisen müsst, da ansonsten
das Script auf den Unterseiten jedesmal überschrieben wird.
Master-Rahmen Eigenschaften-->Hinzufügen/Bearbeiten-->Hinzufügen-->Name vergeben-->bei “Basiert auf:”, wählt Ihr den Master-Rahmen den Ihr aktuell für Eure “Home” eingestellt habt.
Jetzt muss die Pfadangabe zum Script natürlich noch in den neuen Master-Rahmen eingetragen werden: Dazu verwendet Ihr das obere Script also das OHNE die ../
LYTEBOX soll auf allen Unterseiten laufen:
<script type="text/javascript" language="javascript" src="../lyteboxscripts/lytebox.js"></script>
<link rel="stylesheet" href="../lyteboxscripts/lytebox.css" type="text/css" media="screen">
 |
Wir haben nun 4 verschiedene Möglichkeiten die lytebox einzusetzen.
1) Die eingefügten Bilder einzeln aufrufen
2) Eine zusammenhängende Gruppe von Bildern aufrufen (ohne Slideshow Effekt)
3) Eine Gruppe von Bildern mit Slideshow Effekt
4) Lytebox mittels eines Textlinks aufzurufen
Alle 4 Varianten sind hier beschrieben.
zum Seitenanfang
1) EINZELNE Bilder mit lytebox aufrufen
  
Wir fügen nun wie gewohnt über das “Bild einfügen” Werkzeug eines, oder mehrere Bilder unserer Seite hinzu
Jetzt müssen wir dem Bild auch noch den Befehl geben, das Script aufzurufen, welches den lytebox Effekt steuert. Dazu markieren wir ein Bild, und klicken in der “Bild Eigenschaften” Palette” auf den Button “Link”. (s. Screenshot)
Wir wählen unter Linktyp “Datei-Link” und navigieren nun zu dem Bild, welches in der Lytebox angezeigt werden soll.
Mit einem Klick auf den Button: “HTML” und geben nun “In dem Link” den lytebox Befehl ein
rel=”lytebox” title=”dein Titel der zum Bild erscheinen soll”
Das Dialogfeld schliessen mit OK, dann noch auf “Link” klicken, das war’s auch schon.
So wird nun Bild für Bild eingefügt und bearbeitet.
Jetzt lokal publizieren!
und anschliessend wechseln in die
Publizieren-Ansicht
Nachdem wir lokal publiziert haben, sehen wir in dieser Ansicht, die Bilder welche als “Datei-Link” eingebunden wurden im
sogenannten “Root-Verzeichnis” unseres Projektes liegen. Um Ordnung und Übersichtlichkeit in unserem Projekt
zu gewährleisten, wollen wir diese Bilder nun in ein entsprechendes Verzeichnis verschieben.
Wir markieren die Bilder-->rechte Maustaste-->ausschneiden
wechseln in den Ordner “assets” und wieder mit der rechten Maustaste erstellen wir einen neuen Ordner und nennen ihn
“lyteboximg” (oder wie immer Ihr wollt). Wir gehen in den Ordner und mittels rechter Maustaste und “Einfügen” verschieben wir
nun die Bilder dorthin.
Dieser Schritt gilt natürlich auch für die nachfolgenden Varianten der lytebox.
zum Seitenanfang
2) Eine GRUPPE von Bildern einfügen OHNE Slideshow Effekt
Hierzu wird einfach folgendes Attribut hinzugefügt:
rel=”lytebox[gruppenname was auch immer]” title=”Was immer du willst”
Den Gruppennamen fügen wir nun jedem Bild, welches in der Gruppe erscheinen soll, hinzu
zum Seitenanfang
3) Eine Bilder Gruppe MIT Slideshow Effekt erstellen:
Hierzu wird einfach das Attribut ausgetauscht von:
rel=”lytebox” zu rel="lyteshow[gruppenname, was auch immer]” title=”Dein Titel”
zum Seitenanfang
4) Lytebox aufrufen mittels eines Textlinks
Dieser Link soll Lytebox starten
zum Seitenanfang
Für die Mutigen ;)
Lytebox wird standardmässig mit 4 Farbvarianten geliefert: grey (Standard), blue, gold, green
Im lytebox.js file können diverse Einstellungen vorgenommen werden. Unter anderem auch der Austausch der Farben.
Einfach das “grey” mal ersetzen durch die oben genannten Farben und ausprobieren... ;)
Das Ärgernis - Internet Explorer 6
Mit der Standard Einstellung “grey” gibt es auch beim IE 6 keinerlei Probleme. Lästig wird es dann, wenn man die Standardfarbe “grey” durch eine der drei anderen ersetzen möchte. Genügt es bei den aktuellen Browsern IE7, Opera 9.21, Firefox 1.5x und der aktuellen Netscape Version einfach im lytebox.js die oberste Eintragung zu ersetzen, muss beim IE6 einiges in der Datei lytebox.css modifiziert werden.
Möchte man eine andere Farbe auch im IE6 anzeigen, so muss in der lytebox.css die gewünschte (Farb)Eintragung an die erste Stelle des jeweiligen Blocks gerückt werden (#ID).
Nicht zu vergessen natürlich auch noch in der Datei lytebox.js das richtige Theme einzutragen!
Jetzt klappt’s auch im IE 6 ;)
Das war’s auch schon, viel Spass damit - let there be lyte! ;)
Euer Panda
zum Seitenanfang
all images except Screenshots: www.istockphoto.com
|
