Tutorial Amazing Carousel in NetObjects Fusion

Ich beschreibe hier Version: Version 2.1

Hier geht es zum Download: amazingcarousel.com

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

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 Carousel” 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 Euer Karussell. Unter den verschiedenen Tabs, könnt Ihr noch viele individuelle zusätzliche Einstellungen vornehmen.

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

Wenn Ihr mehrere Karussells auf der gleichen Seite einbauen wollt, dann müsst Ihr oben unter “Karussell 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 “carousel.html”) , die vom Karussell 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="carouselengine/jquery.js"></script>
<script src="carouselengine/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="carouselengine/initcarousel-1.css">
<script src="carouselengine/initcarousel-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 Karussells 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 Karussells

<!-- 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 Carousel” in NOF einzubauen (so wie ich es hier getan habe).

Fügt den Link zur CSS-Datei <link rel="stylesheet" type="text/css" href="carouselengine/initcarousel-1.css"> in die Layout-HTML “Zwischen Head Tags” ein.

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

Hierfür kopiert Ihr Euch die beiden .js Dateien

  • amazingcarousel.js
  • initcarousel-1.js

vom Carousel 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 Carousel”

  • carouselengine

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 “carouselengine” 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 Karussells:

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

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

markiert ist, in den HTML-Code Editor eines Textfeldes.

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

<!-- Insert to your webpage where you want to display the carousel -->
<div id="amazingcarousel-container-1">
   <div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:720px;margin:0px auto 0px;">
      <div class="amazingcarousel-list-container" style="overflow:hidden;">
         <ul class="amazingcarousel-list">
            <li class="amazingcarousel-item">
               <div class="amazingcarousel-item-container">
                  <div class="amazingcarousel-image"><a href="images/elefant-lightbox.jpg" title="Afrika"  class="html5lightbox" data-group="amazingcarousel-1"><img src="images/elefant.jpg"  alt="Afrika" /></a></div>
                  <div class="amazingcarousel-title">Afrika</div>
                  <div class="amazingcarousel-description">Elefant</div>
               </div>
            </li>
            <li class="amazingcarousel-item">
               <div class="amazingcarousel-item-container">
                  <div class="amazingcarousel-image"><a href="images/loewe-lightbox.jpg" title="Afrika"  class="html5lightbox" data-group="amazingcarousel-1"><img src="images/loewe.jpg"  alt="Afrika" /></a></div>
                  <div class="amazingcarousel-title">Afrika</div>
                  <div class="amazingcarousel-description">Papa L&ouml;we</div>
               </div>
            </li>
            <li class="amazingcarousel-item">
               <div class="amazingcarousel-item-container">
                  <div class="amazingcarousel-image"><a href="images/loewen-lightbox.jpg" title="Afrika"  class="html5lightbox" data-group="amazingcarousel-1"><img src="images/loewen.jpg"  alt="Afrika" /></a></div>
                  <div class="amazingcarousel-title">Afrika</div>
                  <div class="amazingcarousel-description">Mama und Tante L&ouml;we</div>
               </div>
            </li>
            <li class="amazingcarousel-item">
               <div class="amazingcarousel-item-container">
                  <div class="amazingcarousel-image"><a href="images/gazellen-lightbox.jpg" title="Afrika"  class="html5lightbox" data-group="amazingcarousel-1"><img src="images/gazellen.jpg"  alt="Afrika" /></a></div>
                  <div class="amazingcarousel-title">Afrika</div>
                  <div class="amazingcarousel-description">Gazellen</div>
               </div>
            </li>
            <li class="amazingcarousel-item">
               <div class="amazingcarousel-item-container">
                  <div class="amazingcarousel-image"><a href="images/vogel2-lightbox.jpg" title="Afrika"  class="html5lightbox" data-group="amazingcarousel-1"><img src="images/vogel2.jpg"  alt="Afrika" /></a></div>
                  <div class="amazingcarousel-title">Afrika</div>
                  <div class="amazingcarousel-description">da guckst Du</div>
               </div>
            </li>
            <li class="amazingcarousel-item">
               <div class="amazingcarousel-item-container">
                  <div class="amazingcarousel-image"><a href="images/vogel1-lightbox.jpg" title="Afrika"  class="html5lightbox" data-group="amazingcarousel-1"><img src="images/vogel1.jpg"  alt="Afrika" /></a></div>
                  <div class="amazingcarousel-title">Afrika</div>
                  <div class="amazingcarousel-description">piep einmal</div>
               </div>
            </li>
            <li class="amazingcarousel-item">
               <div class="amazingcarousel-item-container">
                  <div class="amazingcarousel-image"><a href="http://www.youtube.com/embed/YE7VzlLtp-4" title="Big Buck Bunny"  class="html5lightbox" data-group="amazingcarousel-1" data-width="853" data-height="480" ><img src="images/YE7VzlLtp-4.jpg"  alt="Big Buck Bunny" /></a></div>
                  <div class="amazingcarousel-title">Big Buck Bunny</div>
                  <div class="amazingcarousel-description">Video von YouTube</div>
               </div>
            </li>
         </ul>
      </div>
      <div class="amazingcarousel-prev"></div>
      <div class="amazingcarousel-next"></div>
      <div class="amazingcarousel-nav"></div>
      <div class="amazingcarousel-engine" style="display:none;"><a href="http://amazingcarousel.com">JavaScript Carousel</a></div>
   </div>
</div>
<!-- End of body section HTML codes -->

Kopiert nun die vom “Amazing Carousel” generierten Verzeichnisse:

  • images
  • carouselengine

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

Um das Wasserzeichen “amazingcarousel.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