Coin-Slider - Jquery Bilderwechsler mit Spezial-Effekten

Tutorial: Einbau in die Netobjects Fusion - NOF - Website

Violett, die Farbe der Kreativität und der Vergänglichkeit

Grün symbolisiert das Leben, die Natur, die Kraft des Wachstums

Rot... wem wundert es? Farbe der Liebe und der Leidenschaft

Türkis: Das Meer, die Ruhe, die Entspannung, die Stille

Aktiv in Orange... Sportlichkeit, Aktivität, Kraft...

Der Jquery Bilderwechsler “Coin-Slider” (mit weichem Übergang, transparenter Beschriftung, Navigation, Verlinkung und Spezialeffekten) lässt sich zügig in NOF einbauen und sorgt für eine elegante und aufregende Präsentation von Bildern. Grundkenntnisse in Datei-Bearbeitung werden vorausgesetzt.

Die Hersteller-Anleitung sowie die Nutzungs-Bedingungen findet Ihr hier:

workshop.rs/projects/coin-slider/

Zunächst solltet Ihr folgende .zip-Datei herunterladen und entpacken.

cs-skript.zip

Sie enthält die für die Funktion der Galerie erforderlichen Dateien: coin-slider.min.js, jquery 1.4.2 sowie die CSS-Datei.

Tutorial - Schritt 1

Platziert die drei Skript-Dateien in dem Ordner “assets” Eurer lokalen Publizierung.

Platziert die Bilder mit möglichst einfachen Bildbezeichnungen in dem Ordner “assets/images” Eurer lokalen Publizierung. Eine ganz einfache Methode ist die Einfügung der Bilder auf einer Unterseite des Projekts, die von der Navigation ausgeschlossen wird. Beim nächsten Hochladen des Projekts befinden sich diese Bilder automatisch im Ordner “assets/images”.

Öffnet Eure Seitenansicht zur weiteren Bearbeitung des Bilderwechslers.

Tutorial - Schritt 2

Öffnet das Eigenschaftsfensters des Layouts (F9), klickt auf den HTML-Button und tragt folgenden Code ein:

1) Zwischen den Headtags:

Ihr dürft die Anpassung der Pfade nicht vergesssen. Befindet sich die Anwendung auf der Startseite, ist obiger Code relevant. Befindet sich die Anwendung auf Unterseiten, müssen die relativen Pfade zu den Skripts geändert werden. Ein Punkt wird jeweils vor dem Schrägstrich zusätzlich eingefügt. Der Code sieht auf Unterseiten wie folgt aus:

2) Ende des Haupttextes:

Die Breite und Höhe der Bilder werden in obigen Code eingestellt (width = Breite, height = Höhe). Weitere Optionen, wie z.B. die Transparenz der beschrifteten Felder (sog. “opacity”) können hier eingestellt werden, wie auf der Homepage von coin-slider beschrieben.

Tutorial - Schritt 3

Jetzt könnt Ihr den Bildwechsler auf Eurer Seite positionieren und die Bilder verlinken.

Textfeld an gewünschter Stelle positionieren, anschliessend Textfeld mit der Maus aktivieren. Im Fenster “Text-Eigenschaften” Button “HTML” drücken. Folgenden Code im Text-HTML einfügen:

1) Vor dem Tag:

<div id='coin-slider'>
    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/img01.jpg' alt=”Image Title” >
        <span>
            Image title
        </span>
    </a>

    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/imgN.jpg' alt=”Image Title”>
        <span>
            Image title
        </span>
    </a>

    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/img02.jpg' alt=”Image Title”>
        <span>
            Image title
        </span>
    </a>


    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/img04.jpg' alt=”Image Title” >
        <span>
            Image title
        </span>
    </a>

    <a href="http://www.nof-schule.de" target="_blank">
        <img src='./assets/images/img05.jpg' alt=”Image Title”>
        <span>
            Image title
        </span>
    </a>

</div>
<!--

2) Nach dem Tag:

-->

Im obigen code müsst Ihr die vorhandenen Bildnamen mit Euren Bildnamen überschreiben (Gross und Kleinschreibung beachten, auf Sonderzeichen, Leerzeichen und Umlaute verzichten). Die Pfade genau so anpassen wie im obigen Beispiel für die Links zu den Skripts. Die Pfade lauten auf Unterseiten also: ../.

Tutorial - Schritt 4

Folgende und weitere Änderungen zu den Skripts können sinnvoll bzw. notwendig sein:

1) Text der Pfeil-Buttons anpassen:

Anstelle der Pfeile können Beschriftungen eingefügt werden. Öffnet dafür die Datei coin-slider.min.js mit einem HTML-Editor (Beispiel: Phase 5). Sucht Ende der Zeile 28 nach dem folgenden Code: ><<< und >>><. Dieser kann angepasst werden, Beispiel: >prev< und >next<.

2. Breite des Schriftfelds

Die Breite sowie die Farbe des Hintergrunds der Beschriftung und die Farbe der Mini-Thumbs werden in der CSS-Datei eingestellt.

Vorlage:

Folgende Vorlage zeigt Euch die Einstellungen für Startseite und Unterseite. Die NOF 9 Vorlage kann auch mit NOF10 und NOF11 geöffnet werden

Vorlage jQuery coin slider Bilderwechsler in NOF -kann mit Versionen 10 aufwärts geöffnet werden.

Fehlerbehebung:

Tipps zur Selbstkontrolle:

Befinden sich die drei Skript-Dateien im Ordner “assets” der lokalen Publizierung?

Wurden die Dateien im Ordner “Assets” auf den Webspace hochgeladen (verwendet dafür ein FTP-Programm, z.B. FileZilla)

Wurden die Bilder in den Ordner “assets/images” hochgeladen?

Sind die Bildernamen richtig? (Gross-, Kleinschreibung)

Sind die Skripts auf Eurer Seite korrekt? Versucht eventuell den Skript mit den Bildnamen komplett neu aus der Vorlage zu erstellen.

Gerne helfen wir Euch in unserem NOF-Forum!

Eure Barbara und Team

Tutorial geändert/angepasst 16.9.2011*

* Alttitel eingefügt um HTML-Fehler zu vermeiden
* Skriptfehler <div/> entfernt, durch </div> ersetzt
* Vorlage ausgetauscht

Impressum