Tutorial Amazing Slider in NetObjects Fusion

Ich beschreibe hier Version: Version 2.7

Hier geht es zum Download: amazingslider.com

Installiert die .exe Datei und startet den “Amazing Slider”.

Der Einbau erfolgt ebenso einfach wie z.B. bei der Visual Lightbox oder auch dem WOW-Slider.

Hier eine Ansicht. Unten beschreibe ich den direkten Einbau in NOF, hier auf der Startseite (index.html) mit NOF 2013 in der Struktur “Nach Site-Struktur”.

Die Handhabung vom “Amazing Slider” ist eigentlich selbsterklärend. Klickt Euch durch die einzelnen Menü-Punkte durch und nehmt Eure Einstellungen vor.

Ihr könnt unter (1)  Slides, Fotos und auch Videos hinzufügen, einen Link zu einer Web-Adresse eintragen oder auch eine Lightbox öffnen lassen.

Wählt unter (2) Skins ein Design für Euren Slider. Unter den verschiedenen Tabs, könnt Ihr noch viele individuelle zusätzliche Einstellungen vornehmen.

Bei (3) Übergänge, könnt Ihr weiter Einstellungen vornehmen, wie z.B. die Zeit der Effekte - in meinem Beispiel 3000 Millisekunden.

Unter (4) Optionen, könnt Ihr weiter Einstellungen an Eure Wünsche anpassen.

Unter (6) Veröffentlichen, wählt Ihr ein Verzeichnis auf dem PC, in das die vom “Amazing Slider” generierten Skripte publiziert werden sollen.

Wenn Ihr mehrere Slider auf der gleichen Seite einbauen wollt, dann müsst Ihr oben unter “Slider ID:” für jeden Slider die ID erhöhen.

 

1. Möglichkeit des Einbaus der Javascript-Dateien in NOF (alternativ hier):

Nun öffnet Ihr die Startseite (hier “slider.html”) , die vom Slider generiert wurde, mit z.B. Eurem Windows-Eidtor und kopiert den Teil, der mit:

<!-- Insert to your webpage before the </head> -->

markiert ist, in die HTML Eures Layouts. Achtet dabei auf die korrekte relative Pfadangabe zu den Skripten.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn des Haupttextes” (<BODY>)

 <!-- Insert to your webpage before the </head> -->
 <script src="sliderengine/jquery.js"></script>
 <script src="sliderengine/amazingslider.js"></script>
 <script src="sliderengine/initslider-1.js"></script>
 <!-- End of head section HTML codes -->

Hier gibt es mal wieder (wie so oft bei NOF) einen Konflikt mit den jQuery-Dateien von NOF. Daher wird die Navigationsleiste von NOF nicht mehr angezeigt. Das könnt Ihr sehr leicht korrigieren, indem Ihr die Javascript-Datei der Navi erneut unter den Skripten (oben) des Sliders einfügt.

Achtet auch dabei auf die korrekte relative Pfadangabe zu der Datei “navbar.js”.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn des Haupttextes” (<BODY>) > unter den Skripten des Sliders

<!-- navbar.js der NOF Navigationsleiste erneut unter den Javascripts vom Amazing-Slider einbauen -->
<script type="text/javascript" src="./navbars.js"></script>

 

2. Möglichkeit des Einbaus der Javascript-Dateien direkt in NOF (hier NOF 2013):

Hier noch eine etwas elegantere Art die Javascripts vom “Amazing Slider” in NOF einzubauen (so wie ich es hier getan habe).

NOF 2013 verwendet bereits eine jQuery Datei Version 1.8.2 und der “Amazing Slider” in seiner Version 2.7 eine ältere jQuery Datei (Version 1.6.4). Daher könnt Ihr in NOF 2013 diese (ältere) jQuery Datei weglassen <script src="sliderengine/jquery.js"></script> und nur die beiden Javscripts bezüglich des “Amazing Sliders” direkt in NOF einbauen.

Hierfür kopiert Ihr Euch die beiden .js Dateien

  • amazingslider.js
  • initslider-1.js

vom Slider in das Verzeichnis “Assets” Eures Projektes. Markiert das Layout und klickt im Fenster “Layout-Eigenschaften” auf den 3. Button von links “Reihenfolge beim Skriptimport”. Klickt unten in diesem Fenster auf das “+” Symbol und fügt diese beiden Dateien hinzu.

Nun würde NOF diese beiden Dateien allerdings in sein Stammverzeichnis publizieren, daher müsst Ihr noch das neue Verzeichnis vom “Amazing Slider”

  • sliderengine

in der Ansicht “Publizieren” von NOF mit der rechten Maustaste erstellen. Schneidet mit der rechten Maustaste die beiden .js Dateien aus dem Stammverzeichnis der Ansicht “Publizieren” aus und fügt diese in das gerade von Euch erstellte Verzeichnis “sliderengine” wieder ein.
NOF wird nun diese beiden Dateien “Zwischen Head Tags” an der korrekten Stelle einfügen und mit publizieren. Dabei braucht Ihr dann auch nichts mehr an der Datei “navbar.js” verändern, da diese dann automatisch unter den neuen Javascripts steht.

Anzeige des Sliders:

Für die Anzeige des Sliders öffnet Ihr wieder die Startseite (hier “slider.html”) , die vom Slider generiert wurde, mit z.B. Eurem Windows-Eidtor und kopiert den Teil, der mit:

<!-- Insert to your webpage where you want to display the slider -->

markiert ist, in den HTML-Code Editor eines Textfeldes, das Ihr mindestens auf die im Programm, unter (1) Slides, angegeben Breite (hier 960px) aufzieht.

> Fenster “Text-Eigenschaften” > mittlere Button oben “Text” > Button “HTML” > Code einfügen

<!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-1" style="display:block;position:relative;margin:16px auto 56px;">
        <ul class="amazingslider-slides" style="display:none;">
            <li><a href="http://bilder.n3po.com/" target="_blank"><img src="images/meer.jpg" alt="Sonnenaufgang" data-description="Bild von: bilder.n3po.com" /></a></li>
            <li><a href="http://bilder.n3po.com/" target="_blank"><img src="images/wasserfall.jpg" alt="Wasserfall" data-description="Bild von: bilder.n3po.com" /></a></li>
            <li><a href="http://bilder.n3po.com/" target="_blank"><img src="images/palmen.jpg" alt="Palmen" data-description="Bild von: bilder.n3po.com" /></a></li>
            <li><a href="http://bilder.n3po.com/" target="_blank"><img src="images/sonnenuntergang.jpg" alt="Sonnenuntergang" data-description="Bild von: bilder.n3po.com" /></a></li>
            <li><img src="images/BigBunny.jpg" alt="Big Buck Bunny" data-description="Ein Video von YouTupe" />
                <video preload="none" src="http://www.youtube.com/embed/YE7VzlLtp-4" ></video>
            </li>
            <li><a href="http://www.youtube.com/embed/R4U79c-uERg" class="html5lightbox"><img src="images/R4U79c-uERg.jpg" alt="Visual Lightbox Einbau in NOF" data-description="Ein Video von mir zum Einbau der Visual Lightbox, die im Prinzip ganz genauso funktioniert." /></a></li>
        </ul>
        <ul class="amazingslider-thumbnails" style="display:none;">
            <li><img src="images/meer-tn.jpg" /></li>
            <li><img src="images/wasserfall-tn.jpg" /></li>
            <li><img src="images/palmen-tn.jpg" /></li>
            <li><img src="images/sonnenuntergang-tn.jpg" /></li>
            <li><img src="images/BigBunny-tn.jpg" /></li>
            <li><img src="images/R4U79c-uERg-tn.jpg" /></li>
        </ul>
        <div class="amazingslider-engine" style="display:none;"><a href="http://amazingslider.com">jQuery Slideshow</a></div>
    </div>
<!-- End of body section HTML codes -->

Kopiert nun die vom “Amazing Slider” generierten Verzeichnisse:

  • images
  • sliderengine

in das Verzeichnis, wo sich die Seite von NOF befindet (lokal und auf den Server), auf der Ihr diesen Slider einbaut. In diesen Verzeichnissen hat
“Amazing Slider” nun alle Dateien abgelegt.

Um das Wasserzeichen “amazingslider.com” und den Link dazu loszuwerden, müsst Ihr die Software käuflich erwerben.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik