Tutorials von Thomas Frei-Herrmann

Slideshow


Das Skript und das Einbau-Tutorial für NOF für diesen tollen Bildwechsler stellt Paby hier vor.

Dieses Skript ist leider nicht im Zusammenhang mit der NOF-eigenen, grafischen Navigationsleiste mit Ausklappleisten anwendbar. Die Datei “rollover.js”, die für die Ausklappleisten der Navi verantwortlich ist,  erzeugt einen Konflikt (Skriptfehler) mit den Javascript-Dateien dieser Slideshow.

Daher muss man entweder auf die “rollover.js” verzichten, abhaken im Fenster “Navigations-Eigenschaften” oder eine Text-Navigation verwenden.

Man könnte aber auch dieses Skript auf einer “Zero-Margins” Seite einbauen, die man dann, so wie ich es hier gemacht habe, in einem Inlineframe anzeigt und braucht somit nicht auf die Ausklappleisten der Navi zu verzichten.

Hier geht es zu meinem Download der .js-Dateien für dieses Skript. Bitte entpackt diese ZIP-Datei in irgendein Verzeichnis und kopiert den gesamten Ordner:

Slideshow

in das lokale Verzeichnis “Lokale Publizierung” Eures Projektes und natürlich auch entfernt in das Stammverzeichnis (dort wo sich auch Eure Starseite, die index.html, befindet) auf Eurem Server.


Für diese Slideshow benötigt Ihr zunächst diese 2 .js-Dateien, die sich in dem Ordner “Slideshow” befinden

mootools.js
slideshow.css (diese CSS-Datei habe ich nicht verwendet)
slideshow.js

... nun müsst Ihr auf der Seite, auf der die Slideshow eingebaut werden soll, die Verlinkung zu diesen beiden .js-Dateien in die HTML Eures Layouts einbauen.

> Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” > Code  “Zwischen Head Tags”  einfügen.

Die zwei Punkte vor dem Slash (../) sind eine relative Pfadangabe von einer Unterseite des Projektes, die sich normalerweise in Eurem Ordner “html” befindet. Solltet Ihr das auf der Startseite einbauen, dann darf da nur ein Punkt (./) stehen, da die Startseite bereits im Stammverzeichnis liegt.

<script type="text/javascript" src="../Slideshow/mootools.js"></script>
<script type="text/javascript" src="../Slideshow/slideshow.js"></script>

... nun müsst Ihr das eigentliche Skript in Eure Seite einbauen. Dazu zieht Ihr Euch an der Stelle, wo die Slideshow erscheinen soll, ein Textfeld auf. Klickt dann im Fenster “Text-Eigenschaften” oben auf den mittleren Button “Textfeld” und dann auf den Button “HTML”. Fügt den Code (unten) in den HTML-Editor von NOF ein.

Ich habe hier meine persönlichen Einstellungen für die Bilder und die Links mal blau markiert, die Ihr dann natürlich in Eure eigenen Daten ändern müsst. Die Fotos selbst habe ich zuvor mittels FTP-Programm in meinen Ordner “images” kopiert und dann diesen Standort mittels relativer Pfadangabe im Skript angegeben. In meinem Skript mit zwei Punkten (../), da meine Seite eine Unterseite, die sich  im Ordner “html” befindet, ist. Also auch hier wieder nur ein Punkt (./), falls Ihr das auf der Startseite einbaut.

./assets/images

Das gesamte Skript habe ich noch zum zentrieren auf meiner Seite in einen DIV-Container gepackt, hier mal rot markiert, den Ihr natürlich auch weglassen könnt.

... den Code für die unterschiedlichen Bilder könnt Ihr natürlich beliebig oft kopieren oder auch entfernen, um noch zusätzliche Bilder anzuzeigen, also diesen Teil hier:

    imgs.push({
         file: '../assets/images/peonie.jpg',
         title: 'zu meiner Themen-Seite',     
         desc: 'Peonie - verlink zu meiner Themen-Seite',
         url: 'http://www.tommyherrmanndesign.com/nof/html/themen-liste.php'
    });

Bitte achtet darauf, dass die Ansicht der Überschrift in dieser Slideshow den CSS-Einstellungen Eurer
NOF-Überschrift “H2” entspricht.

Hier habe ich noch eine weiße Linie als Trennung zwischen der Überschrift “H2” und dem normalen Textabsätzen “P”, die ich in der “Design-Ansicht” in den “CSS-Code” von der Klasse “H2”
eingetragen habe,  also:

border-bottom : 1px inset rgb(255,255,255)

wobei inset ein 3D-Effekt ist, den man aber bei so einer feinen Linie kaum sehen kann.

H2{
    font-family : Verdana, Tahoma, Arial, Helvetica, Sans-serif;
    font-size : 16pt;
    color : rgb(255,255,255);
    text-decoration : none;
    border-bottom : 1px inset rgb(255,255,255)
}

Wollt Ihr z.B. keine Titel-Leiste einblenden und anzeigen lassen, dann müsst Ihr das in der Datei

slideshow.js

ändern. Dazu setzt Ihr diesen Befehl in Zeile 15 auf false anstatt true

captions: true,

...
oder vielleicht wollt Ihr (wie ich hier) diese Slideshow in einem “Inlineframe” anwenden, dann müsstet Ihr in Zeile 429 anstelle von window.location > parent.location einsetzen, da sonst gesetzte Links innerhalb des “Inlineframes” angezeigt werden würden. Also diese Zeile dann so ersetzen:

parent.location.href = url;

... in dieser Datei könnt Ihr auch noch etliche andere Einstellungen vornehmen, wie Farben, Geschwindigkeiten, etc.

nach oben

diese Seite weiter empfehlen



Counter Statistik