Tutorial Simply Scroll in NetObjects Fusion

gefunden auf: simplyScroll - ich beschreibe hier Version 2.0.5 vom 05.10.2012 - funktioniert auch am mobilen Gerät

Bitte ladet Euch auf der Download-Seite von simpleScroll oben am Link die ZIP-Datei “jquery.simplyscroll.zip” herunter und entpackt diese Datei. Ihr erhaltet einige Dateien und ein Verzeichnis “test” mit etlichen HTML-Seiten, die Ihr mal mittels Doppelklick starten solltet, um die unterschiedlichen Beispiele zu sehen. Öffnet die jeweilige HTML-Seite mit einem Editor, um am einfachen Quelltext zu sehen, was Ihr einbauen könnt.

Ich habe hier 2 Beispiele erstellt, für die Ihr folgende Dateien, neben Euren eigenen Bildern, benötigt:

Ihr könnt diese Dateien auch hier downloaden, indem Ihr mit der rechten Maustaste auf die Links klickt und im Kontext-Menü wählt “Ziel speichen unter”.

Zunächst habe ich diese drei Dateien (oben) und alle meine zu verwenden Bilder in NOF direkt in der Assets-Verwaltung eingelesen, sodass NOF diese Dateien kennt und auch gleich lokal und entfernt mit publiziert. Klickt dazu mit der rechten Maustaste in der Assets-Verwaltung auf eine freie Stelle und sucht Eure Dateien auf dem PC, die Ihr am besten vorher in das Verzeichnis “Assets” Eures Projektes kopiert. Hakt  “Datei Immer publizieren” an.

Ansicht Verwaltung

Ich verwende hier die Publizierungs-StrukturNach Site-Struktur”. In diesem Fall wird NOF alle in der Assets-Verwaltung eingelesenen Dateien automatisch im Stammverzeichnis des Projektes ablegen und dort habe ich diese auch belassen. Die relativen Pfadangaben müssen also später immer zum Stammverzeichnis zeigen. Unten eine Teil-Ansicht von der Ansicht “Publizieren”, wo Ihr die CSS, JS und Bilder Dateien dann wiederfinden werdet.

Ansicht Publizieren

Fügt nun die Verlinkungen zu den benötigten JavaScript-Dateien und der CSS-Datei in die HTML vom Layout ein. Hier als relative Pfadangabe mit einem Punkt davor (bleibe im gleichen Verzeichnis, da ich das hier auf meiner Startseite eingebaut habe). Auf einer Unterseite der ersten Ebene müssten dort zwei Punkte davor (2 Punkte = gehe ein Verzeichnis höher zum Stammverzeichnis).

Der unten blau markierte Teil ist eine JavaScript-Funktion, die den Scroll der Bilder steuert, hier mit der Geschwindigkeit 4 (speed) 1-10 langsam-schnell.

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="./jquery.simplyscroll.css" media="all" type="text/css">

<script type="text/javascript">
    (function($) {
        $(function() {
            $("#scroller").simplyScroll({
            speed: 4
        });
});
})(jQuery);
</script>

Hier noch ein Screenshot der Seiten-HTML, wo ich diese Verlinkungen und das JavaScript am 2. Button (oben) von links “Zwischen Head Tags” eingefügt habe.

Seiten HTML

Nun fehlen nur noch Eure Bilder, die Ihr in den HTML-Code Editor eines Textfeldes einfügt.

> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Textfeld” > Button “HTML

Hier habe ich das von NOF automatisch bei jedem Textfeld generierte <p> Tag auskommentiert. Im ‘HTML-Code Editor’ ganz oben --> und am Ende des Codes dann <!-- schreiben.

-->
            <ul id="scroller">
                <li><img src="./Sonnenaufgang.jpg" width="960" height="305" alt="Sonnenaufgang" title="Sonnenaufgang"></li>
                <li><img src="./Weinlaub.jpg" width="960" height="305" alt="Weinlaub" title="Weinlaub"></li>
                <li><img src="./Enten.jpg" width="960" height="305" alt="Enten" title="Enten"></li>   
            </ul><!--

Achtet bei Euren Bildern auf die korrekte Schreibweise und auf Groß- und Kleinschreibung und gebt die Breite und Höhe Euer Bilder an (hier 960 x 305 Pixel) sowie natürlich wieder auf die richtige relative Pfadangabe zum Stammverzeichnis, indem hier ja die Bilder liegen. Unten noch ein Screenshot dieser Ansicht.

HTML-Code Editor

Vervollständigt nun das Auskommentieren noch im Objekt-Editor

> Textfeld mittels einfachem Klick markieren > Button “HTML

indem hier ganz oben (vorher) <!-- schreibt und ganz unten (nachher) --> schreibt. Auf dies Art sind nun nur noch die <ul> und <li> Tags, die in der CSS vom Skript angesprochen werden, aktiv.

Objekt-Editor

Zusätzliche Bemerkungen:

Ihr müsst mit einem Editor (z.B. dem Windows-Editor) die CSS-Datei vom Skript “jquery.simplyscroll.css” Euren Bildern anpassen. So habe ich hier die Container für den horizontalen Slider ab dem Kommentar

  • /* Custom class modifications - override classees */

geändert. Hier habe ich folgende CSS-Klassen, für die Anzeige der Breite und Höhe meiner Bilder, sowie für einen zusätzlichen Schatten, runde Ecken und einen anderen Cursor über den Bildern, modifiziert.

.simply-scroll { /* Customisable base class for style override DIV */
width: 990px;
height: 305px;

margin-bottom: 1em;
}

.simply-scroll .simply-scroll-clip {
width: 990px;
height: 305px;

        box-shadow: 5px 5px 5px #888888;
        border-radius: 10px;
        cursor: progress;

}

.simply-scroll .simply-scroll-list {}

.simply-scroll .simply-scroll-list li {
float: left;
width: 960px;
height: 305px;

}

Zusätzliche Bemerkungen zum vertikalen Slider:

Hier habe ich ebenfalls die CSS-Datei ab

  • /* Vertical scroller example */

geändert und an meine Bedürfnisse angepasst.

.vert { /* wider than clip to position buttons to side */
width: 990px;
height: 305px;

margin-bottom: 1em;
}

.vert .simply-scroll-clip {
width: 940px;
height: 305px;
        box-shadow: 5px 5px 5px #888888;
        border: 1px solid #888888;
        border-radius: 10px;

}

.vert .simply-scroll-list {}

.vert .simply-scroll-list li {
width: 940px;
height: 305px;
            border-bottom: 2px solid #ffffff;

}

JavaScript für vertikalen Slider:

Für meinen vertikalen Slider habe ich das JavaScript, welches “Zwischen Head Tags” der Seiten-HTML eingefügt wurde, durch dieses Skript ersetzt:

<script type="text/javascript">
(function($) {
    $(function() {
        $("#scroller").simplyScroll({
            customClass:'vert', // CSS Class vertikal
            orientation:'vertical', // vertikale Ausrichtung
            auto: false, // Buttons werden angezeigt
            frameRate: 60, // weniger Ruckeln
            speed: 2 // Geschwindigkeit
        });
    });
})(jQuery);
</script>

... und hier noch als Beispiel mein Code vom vertikalen Slider in der HTML des Textfeldes,  hier 2 Punkte als relative Pfadangabe zum Stammverzeichnis mit meinen Bildern.

            <ul id="scroller">
                <li><a href="http://www.nof-schule.de/forum/" target="_blank"><img src="../Sonnenaufgang.jpg" width="960" height="305" alt="Sonnenaufgang" title="Klicke zum Forum"></a></li>
                <li><p><img src="../Weinlaub.jpg" width="800" height="305" style="float: left; margin-right: 5px;" alt="Weinlaub" title="Weinlaub"><br><br>Hier steht ein beliebiger Text rechts neben diesem Bild mit dem Weinlaub.<br><br><a href="../Tutorial/tutorial.html">Zum Tutorial</a></p></li>
                <li><img src="../Enten.jpg" width="960" height="305" alt="Enten" title="Enten"></li>
                <li><p style="margin-left: 5px;"><img src="../Blume.jpg" width="800" height="305" style="float: right; margin-left: 5px;" alt="Blume" title="Blume"><br><br>Hier steht ein beliebiger Text links neben diesem Bild mit der Blume.<br><br><a href="../Tutorial/tutorial.html">Zum Tutorial</a></p></li>
                <li><img src="../Luchs.jpg" width="960" height="305" alt="Luchs" title="Luchs"></li>
                <li><img src="../Sonnenuntergang.jpg" width="960" height="305" alt="Sonnenuntergang" title="Sonnenuntergang"></li>
                <div style="text-align: center; padding-top: 10px; padding-bottom: 10px; background-color: #ffffff"><a href="../Tutorial/tutorial.html">zu meinem Tutorial</a></div>
            </ul>

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik