WOW Slider Tutorial für NOF - NetObjects Fusion

Bitte ladet Euch zunächst den “WOW Slider” hier herunter:

wowslider.com

Entpackt die .zip Datei und installiert die .exe Datei in irgendein Verzeichnis. Die Handhabung dieses kleinen Programms ist selbsterklärend und der Einbau in NOF funktioniert ganz genauso wie z.B. bei der Visual Lightbox, guckt also bitte auch dort oder auch der einfache Einbau mittels Iframe.

Bitte denkt daran, dass das Programm nur für private Websites lizenzfrei ist. Ich habe hier die WOW Slider Version 2.5 vom 22.08.2012 eingebaut, wobei sich der Einbau bis zur aktuellen Version 5.1 vom 05.03.2014 nicht geändert hat. Bitte lest auch meine Bemerkungen zur NOF-Klappnavigation.

Hier einige Ansichten des Programms. Ihr zieht einfach Eure Fotos in die Arbeitsfläche vom “WOW Slider”.

... achtet darauf, wenn Ihr mehr als 1 Galerie im gleichen Projekt erstellen wollt, dass Ihr (unten) bei “Slider ID” die ID der Galerie erhöht, also für eine zweite und andere Galerie dann z.B. “2” dort eintragt.

Nachdem Ihr Euren “WOW Slider” fertig erstellt und lokal mit dem Programm publiziert habt, öffnet Ihr die vom Programm erstellte Datei index.html
mit Eurem Windows Editor und kopiert den mit

WOWSlider.com HEAD section

markierten Teil in die HTML Eures Layouts.

> Layout markieren > Fenster “Layout Eigenschaften” > “Zwischen Head Tags” einfügen

... unten als Beispiel von einer Unterseite, daher mit 2 Punkten ../ vor den Pfad-Angaben. Von der Startseite gehört dann dort nur 1 Punkt hin ./

<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="../engine1/style.css" />
<script type="text/javascript" src="../engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

Ebenso kopiert Ihr den mit

WOWSlider.com BODY section

markierten Teil und fügt diesen dann in den HTML-Code Editor eines Textfeldes ein. Achtet auch hier wieder auf die korrekten relativen Pfadangaben.

... unten als Beispiel von einer Unterseite, daher mit 2 Punkten ../ vor den Pfad-Angaben. Von der Startseite gehört dann dort nur 1 Punkt hin ./

<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
   <div class="ws_images">
      <ul>
      <li><img src="../data1/images/afrika001.jpg" alt="Afrika" title="Afrika" id="wows1_0"/>Elefant</li>
      <li><img src="../data1/images/afrika002.jpg" alt="Afrika" title="Afrika" id="wows1_1"/>Gazellen</li>
      <li><img src="../data1/images/afrika003.jpg" alt="Afrika" title="Afrika" id="wows1_2"/>Löwen</li>
      <li><img src="../data1/images/afrika004.jpg" alt="Afrika" title="Afrika" id="wows1_3"/>Löwe</li>
      <li><img src="../data1/images/afrika005.jpg" alt="Afrika" title="Afrika" id="wows1_4"/>Vogel</li>
      <li><img src="../data1/images/afrika006.jpg" alt="Afrika" title="Afrika" id="wows1_5"/>Vogel</li>
      </ul>
   </div>
   <div class="ws_bullets">
      <div>
         <a href="#" title="Afrika"><img src="../data1/tooltips/afrika001.jpg" alt="Afrika"/>1</a>
         <a href="#" title="Afrika"><img src="../data1/tooltips/afrika002.jpg" alt="Afrika"/>2</a>
         <a href="#" title="Afrika"><img src="../data1/tooltips/afrika003.jpg" alt="Afrika"/>3</a>
         <a href="#" title="Afrika"><img src="../data1/tooltips/afrika004.jpg" alt="Afrika"/>4</a>
         <a href="#" title="Afrika"><img src="../data1/tooltips/afrika005.jpg" alt="Afrika"/>5</a>
         <a href="#" title="Afrika"><img src="../data1/tooltips/afrika006.jpg" alt="Afrika"/>6</a>
      </div>
   </div>
   <!-- Generated by WOWSlider.com v2.5 -->
   <div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="../engine1/wowslider.js"></script>
<script type="text/javascript" src="../engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->

Nun müsst Ihr natürlich noch mit Eurem FTP-Programm die beiden vom “WOW Slider” erstellten Verzeichnisse mit den Fotos und den Skripten in das Stammverzeichnis, also dort wo sich auch Eure Startseite “index.html” befindet, kopieren. Also z.B. die beiden Ordner:

• data1
• engine1

Iframe - Variante:

Für diejenigen von Euch, die den “WOW Slider” einfach in einem Iframe verlinken wollen habe ich das Beispiel hier erstellt.

Dazu kopiert Ihr mit Eurem FTP-Programm sämtliche von dem “WOW Slider” generierten Ordner und die “index.html”, also

• data1
• engine1
• index.html

in irgendeinen Ordner auf Eurem Server und verlinkt dann den Iframe einfach auf diese Startseite, also z.B.:

http://www.DeineDomain.de/WOWSlider/index.html

Bemerkungen:

• Das Wasserzeichen “WOWSlider.com” könnt Ihr ausblenden, wenn Ihr die Software käuflich erworben habt.
   
• Bitte verwendet für Seiten mit dem “WOW Slider”, den Ihr direkt in die HTML von NOF einbaut, einen validen DOCTYPE (HTML-Ausgabe) wie “LOOSE”. Diesen DOCTYPE kann man ab NOF 12 sehr einfach einstellen, indem man bei dem NOF Standard-DOCTYPE das Häkchen bei “Verwenden Quirks Modus doctype” entfernt. Ältere NOF Versionen können sich mit der DOCTYPE-Komponente von “SwissKnife for NOF” behelfen.

Bemerkungen zur NOF Klappnavigation (gilt nicht für NOF 2013 mit Version 5.x vom WOW Slider):

• Die Klappnavigation von NOF (wie z.B. unter meinem Tab “Tutorial”) hat einen niedrigeren z-index als jener, der in der CSS vom WOW-Slider eingetragen ist. Wenn Ihr die Klappleisten von NOF verwendet, werden diese also nicht über dem WOW-Slider angezeigt.
  
  Dies könnt Ihr sehr einfach ändern:
   
• Öffnet die Datei “style.css” mit Eurem Windows-Editor im Engine-Verzeichnis des WOW-Sliders und ändert gleich oben in der ID
  
  #wowslider-container?
  
  den z-index auf 0
  
  z-index:0;

Fertig.

nach oben

Viel Erfolg!