• Wow, was für ein toller Slider...
  • Ein echter Hingucker für jede Website...
  • Und was noch besser ist...
  • Man kann ihn prima in sein NOF-Projekt integrieren...
  • Einfach die Software downloaden und installieren...
  • Ein paar schöne Bilder heraussuchen...
  • Eine Galerie generieren lassen...
  • Und aufmerksam diese Anleitung abarbeiten...
1 2 3 4 5 6 7 8
Horizontal Image Scroll by WOWSlider.com v2.3
 



WOW-Slider in NetObjects Fusion einbinden - Tutorial / Anleitung


Auf einem Streifzug durchs Internet entdeckte ich vor ein paar Tagen den WOW-Slider und war recht begeistert. Zum einen ist die Nutzung für nichtkommerzielle Projekte kostenlos und der Preis für kommerzielle Projekte in Anbetracht der Nutzungsvielfalt überschaubar und zum anderen ist das Erstellen eines Sliders mit Hilfe der angebotenen Software wirklich ein Kinderspiel.
Als es mir dann auch noch stressfrei gelang, den Slider in ein NOF-Projekt zu integrieren, war ich vollends begeistert und möchte Euch hieran einfach teilhaben lassen.

Zunächst müsst Ihr Euch die benötigte Software unter http://wowslider.com  downloaden. Entweder im Slider den Download-Button klicken, oder die obere Navigationsleiste nutzen.
 

Screen1

Ihr habt nun die Auswahl je eine Kostenlose Version für Windows oder Mac zu downloaden oder aber, wenn der Slider kommerziell zum Einsatz kommen soll, eine der zwei kostenpflichtigen Lizenzen zu kaufen. Ich würde zunächst aber auf jeden Fall mal den Slider testen und hierzu die Gratisversion downloaden.

Screen2



Im nächsten Schritt werdet Ihr gebeten Euren Namen und Eure E-Mail-Adresse anzugeben. Im Anshcluss klickt Ihr den Button “Download now!” und löst damit den automatischen Versand einer E-Mail an die von Euch angegeben Adresse aus. Der nächste Schritt lautet also, ins Postfach sehen.

 

Screen3



Die E-Mail erreicht Euch zeitnah. Sollte sie länger auf sich warten lassen, dann schaut auch mal im Spamfilter nach, ob sie dorthin vielleicht aussortiert wurde. In der E-Mail findet Ihr nun die endgültigen Downloadlinks für Windows oder Mac. Trefft eure Wahl und klickt den entsprechenden Link an.

 

Screen4



Im sich öffnenden Dialog solltet Ihr euch für “Datei speichern” entscheiden und den OK-Button klicken.

 

Screen5



Die heruntergeladene Datei muss von Euch entpackt werden und Ihr erhaltet eine exe-Datei mit der Bezeichnung “wowslider-setup”. Diese Datei führt Ihr bitte aus und folgt den Anweisungen des Installationsassistenten. Nach Fertigstellung der Installation startet Ihr das Programm WOW Slider.

 

Screen6



Die Bedienung des Programms ist denkbar einfach. Ihr markiert einfach die Bilder Eurer Wahl, zieht sie mit der Maus in das Programmfenster von WOW Slider und schon werden sie dort angezeigt.

 

Screen6b



Dann markiert ihr das erste Bild und nehmt am unteren Rand des Fensters die gewünschten Einstellungen vor. In meinem Fall habe ich den Dateinamen (Titel) entfernt und einen Bildkommentar eingetragen. Man kann aber auch eine Verlinkung für das Bild eintragen. Detaillierte Informationen zu den Programmfunktionen findet Ihr Ihr hier. Am oberen Fensterrand könnt Ihr eine Sprachauswahl  treffen, u.a. steht dort auch ”deutsch” zur Auswahl.
Nachdem Ihr Eure Einstellungen für das erste Bild vorgenommen habt, markiert Ihr mit einem einfachen klick das nächste Bild und bearbeitet dessen Einstellungen. So setzt sich das fort, bis alle Bilder wunschgemäß mit Kommentaren etc. versehen wurden.

 

Screen7



Im nächsten Schritt nehmen wir die Galerieeinstellungen vor. hierzu klickt Ihr zunächst auf den kleinen Maulschlüssel in der oberen Symbolleiste. Es öffnet sich ein Fenster mit drei Menüpunkten. Den Menüpunkt allgemein habe ich auf den Standardeinstellungen stehen lassen.
Wir wählen also Menüpunkt zwei “Bilder”. Hier habe ich nun festgelegt welches Aussehen der Slider bekommen soll (Vorlage), in welcher Größe der Slider generiert werden soll, hier habe ich mich für die “benutzerdefinierte Größe” entschieden und meine Wunschmaße angegeben. Ich habe gewählt, mit welchem Effekt der Wechsel zwischen den einzelnen Bildern erfolgen soll und in welchem Intervall der Bildwechsel stattfinden soll. Auch hier gilt wieder, für mehr Optionen und Programminfos beim Anbieter direkt nachlesen.

 

Screen8



Nachdem hier alle Einstellungen getätigt wurden, wechselt Ihr nahtlos zum Menüpunkt “Veröffentlichen”.
Hier wählt Ihr als Methode der Veröffentlichung “Ordner zur Veröffentlichung”. Im Eingabefeld dahinter seht Ihr den Pfad zu dem Ordner, in den das Programm standardmäßig den generierten Slider ablegt. Ich habe den Pfad durch “/Blumenslider“ ergänzt, damit ich für den Fall, dass ich mehrere Slider generieren möchte, eine bessere Übersicht behalte. Um zwischen mehreren Galerien zu unterscheiden könnt Ihr in diesem fenster aber auch eine ID für jeden Slider vergeben.
Durch das Häkchen bei  “Seite nach der Veröffentlichung öffnen” bekommt Ihr die fertige Galerie nach dem Generieren sofort angezeigt.
Mit einem Klick auf den Button “Veröffentlichen” startet Ihr das Generieren Eures Sliders.

 

Screen9

 

Screen10



Und schon öffnet sich Euer Browser mit dem fertig erstellten Slider. Toll, oder!?

 

screen11



Jetzt haben wir also einen Slider und nun geht es an den einbau in Euer NOF-Projekt. Hierzu navigiert Ihr zunächst mal in den Ordner, in welchen das Programm Euren Slider abgelegt hat. Das Programm generiert für jede erstellte Galerie (Slider) zwei Ordner, die Ordner “engine” und “data” - die zusätzliche Zahl in der Ordnerbezeichnung ist identisch mit der vergebenen ID - und eine index.html.

 

screen12



Wenn Ihr den Slider auch bei lokaler Publizierung bewundern wollt, kopiert Ihr Euch nun diese zwei Ordner, in meinem Fall “data1” und “engine1” in Eure Zwischenablage. (Rechtsklick auf die Ordner und kopieren auswählen) und navigier dann  in den Projektordner des Projekts, in dem der Slider laufen soll. Dort öffnet Ihr den Ordner “lokale Publizierung” (sollte er fehlen, müsst ihr das Projekt erst einmal lokal publizieren) und fügt die Kopie einmal direkt in diesen Ordner und einmal in den html-Ordner ein.

 

screen13

 

screen14



Wenn diese Vorbereitungen getroffen sind, öffnet Ihr Euer NOF-Projekt und navigiert parallel nochmals in den Ordner mit der generierten Galerie. Dort geht Ihr mit einenem Rechtsklick auf die index.html und wählt im Kontextmenü die Option “Öffnen mit” >> “Editor”.

 

screen15



Hier markiert Ihr nun den im Screenshot eingefärbten Bereich und kopiert ihn in Eure Zwischenablage.
Zum besseren Verständnis, der Code-Abschnitt den Ihr kopieren müsst, beginnt so:

<!-- Start WOWSlider.com HEAD section .....


und endet so:

.... WOWSlider.com HEAD section -->



screen16



Nun wechselt Ihr in euer NOF-Projekt, um den Code dort zu platzieren. Ihr müsst nun entscheiden, ob der Slider nur auf einer Seite laufen soll oder im gesamten Projekt. Soll er nur auf einer Seite laufen, genügt es, den Code ins Layout-html einzufügen (Layouteigenschaften aufrufen = Taste F9 drücken), soll der Slider im ganzen Projekt laufen, solltet Ihr den Code ins Masterrahmen-html einfügen. (Masterrahmeneigenschaften aufrufen = Taste F10 drücken)
Ihr drück also die für Eure Bedürfnisse passende Taste und klickt im Anschluss den html-Button auf der Eigenschaftenpalette.

Es öffnet sich ein Fenster, in welches der kopierte Code eingefügt werden muss. 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.
 

screen17



Ihr wechselt jetzt wieder zur geöffneten index.html. Hier markiert Ihr nun wieder den im Screenshot eingefärbten Bereich und kopiert ihn in Eure Zwischenablage.

Zum besseren Verständnis, der Code-Abschnitt den Ihr kopieren müsst, beginnt so:

<!-- Start WOWSlider.com BODY section .....


und endet so:

.... WOWSlider.com BODY section -->


screen18



Zurück in Eurem NOF-Projekt zieht Ihr ein Textfeld auf und platziert es an einer Stelle Eurer Wahl. Achtet darauf, dass der Cursor im Textfeld blinkt, klickt auf den Reiter mit dem weiß unterlegten „A” und dort auf den Button „html”. Es öffnet sich ein Fenster, in welches Ihr den Code aus Eurer Zwischenablage einfügt. Mit einem Klick auf den „OK”-Button bestätigt Ihr Eure Eingabe.

screen19

 

Damit ist die eigentliche Arbeit auch schon getan. Nach lokaler Publizierung Eurer Seite könnt Ihr nun bereits Euren WOW-Slider bewundern. User die den FireFox (FF) oder InternetExplorer 9 (IE 9) nutzen, werden mit dem Ergebnis bereits zufrieden sein, User die Ihre Arbeit mit dem IE 8 begutachten werden wahrscheinlich erschrecken. Hier gibt es ein kleines Problem mit dem von NOF generierten DocType, welches wir dank der neuen SwissKnife-DocType-Komponente relativ schnell und einfach beheben können.

All die Leser, die die Komponente nicht kennen und somit nicht installiert haben, können diese hier kostenlos downloaden.
Wie man die Komponenten installiert, könnt Ihr hier nachlesen und wie Ihr mit der DocType-Komponente umgehen müsst um NOF einen validen DocType zu entlocken, das könnt Ihr dann hier nachlesen.

Ihr publiziert eure Website in diesem Fall mit dem DocType „LOOSE”.
Das sollten übrigens auch die User tun, die selbst keinen IE 8 mehr nutzen, weil es durchaus sein kann, dass unter den Besuchern Eurer Seite noch Nutzer des IE 8 zu finden sind.

Bei dem von mir verwendeten Slider gibt es im IE 8 noch ein minimales Ruckeln, bei anderen generierten Slidern ist mir gar nichts Ungewöhnliches aufgefallen.

 

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