NOF2013 Karussell Animationen

[Dada]

Netobjects hats es zwar nicht vorgesehen aber die Animationseffekte von jquery kann man auch mit NOFKarussell anwenden. Dafür müssen aber die generierten Seiten von NOF in einem Editor angepasst werden.

http://goo.gl/9bC97c

ACHTUNG:

Diese Anleitung ist für fortgeschrittene User gedacht.

[Dada]

Ihr benötig zusätzlich jqueryeasing. Das ist ein Plugin für jQuery.
Ihr könnt es euch hier herunterladen.

http://gsgd.co.uk/sandbox/jquery/easing/

[Dada]

Ihr müsst euer Projekt lokal Publizieren.
In dem Ordner lokale Publizierung und desen Unterordner sucht ihr die entsprechende Seite.

Hier bei mir die index.html und öffnet diese mit einem Texteditor.

Dort sucht ihr die Einträge

Code: HTML5

1. <script type="text/javascript" src="./jquery.js">
2. </script>
3. <script type="text/javascript" src="./jquery.jcarousel.js">
4. </script>
5. <script type="text/javascript" src="./navbars.js">

Und fügt dort noch den Scriptaufruf für jquer_easing zwischen der jquery.js und der jquery.jcarousel.js  hinzu.

Code: HTML5

1. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
2.  

Das sollte dan nachher so aussehen.

Code: HTML5

1. <script type="text/javascript" src="./jquery.js">
2. </script>
3. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
4. <script type="text/javascript" src="./jquery.jcarousel.js">
5. </script>
6. <script type="text/javascript" src="./navbars.js">
7. </script>

Den Pfad zu Javascript-Datei müsst ihr nartürlich anpassen.

[Dada]

Zur jeder Seite generiert NOF eine JS-Datei. Sie hat in  den selben Namen wie die Seite gefolgt von _nof.js

In meinem Fall ist es die index_nof.js

Auch diese Datei öffnet ihr mit dem Editor.
Ihr findet dort unter
// Begin JCarousel

folgenden Code

Code: Javascript

1. $(document).ready(function() {
2.         $("#Karussell4>ul").jcarousel({scroll:1, visible:1, vertical:false, auto:3, wrap:"circular"});

Die Klasse für das Carousel kann auch anders benannt sein.

Hier fügen wir nun noch etwas hinzu.

Code: Javascript

1. easing: 'easeInSine',
2. animation: 750,

easeInSine ist die easing-Methode. Es gibt noch viele weitere wie ihr auf der Demoseite seht.

Der Wert in Animation gibt die Zeit in Millisekunden an die für das Animieren genutzt werden soll.

Das solte danach so ausehen.

Code: Javascript

1. $(document).ready(function() {
2.         $("#Karussell4>ul").jcarousel({easing: 'easeInSine', animation: 750, scroll:1, visible:1, vertical:false, auto:3, wrap:"circular"});

[Dada]

Wenn ihr die Dateien abgespeichert hat kontrolliert das Ergebniss im Browser.