Tutorials von Thomas Frei-Herrmann

Tutorial Wechselbilder-Skript von Dynamicdrive

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Zunächst ladet Ihr Euch die Skripte von Dynamicdrive herunter oder Ihr könnt das auch hier von meiner Seite downloaden:

Letzte Änderung am 08.02.2012
Slideshow jQuery. Downloads insgesamt seit 08.02.2012: 214

Nach dem Download von meiner Seite erhaltet Ihr die Datei

2012-02-08-Slideshow.zip

die Ihr bitte entpackt. Ihr erhaltet nach dem Entpacken der ZIP-Datei einen Ordner

slideshow

In diesem Ordner befinden sich eine Javascript-Datei sowie 3 Bilder, die zu dem Skript gehören.

Kopiert diesen Ordner nun in das Stammverzeichnis Eurer “Lokalen Publizierung” und in das Stammverzeichnis auf Eurem Server.


Nun fügt Ihr folgendes Skript in die HTML des Layouts ein. Dies ist das Skript von meiner Seite, das Ihr natürlich noch anpassen müsst.

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

Bitte passt dabei den relativen Pfad zu der Datei “fadeslideshow.js” an. Hier mit einem Punkt ./, da ich das hier auf meine Startseite eingebaut habe. Auf einer Unterseite, die sich im Ordner “html” befindet, müssten dort dann 2 Punkte hin ../

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID vom DIV Container der Slideshow
dimensions: [816, 612], //Breite und Höhe der Galerie in Pixeln. Hier die Größe des größten Fotos eintragen
imagearray: [
["./assets/images/Eichkater.jpg", "", "", "Unser Eichhörnchen Erwin im Garten"],
["./assets/images/Hibiskus.jpg", "http://www.tommyherrmanndesign.com/nof/html/nof-gast.php", "_new", "Hibiskus im Garten. Wenn Ihr auf dieses Foto klickt, dann geht es zu meinem Gästebuch"],
["./assets/images/Peonie.jpg", "", "", "Peonie in unserem Garten"],
["./assets/images/Tulpe.jpg", "", "", "... oder auch eine Tulpe"] //<--Kein Komma hinter dem letzten Bild!
],
displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
persist: false, //merkt sich das letzte, gezeigte Bild und ruft es innerhalb einer Session wieder auf
fadeduration: 800, //Dauer in Millisekunden
descreveal: "ondemand", // Stil der Anzeige der Beschreibung der Bilder
togglerid: "" // hier kann eine eigene CSS-Class angegeben werden
})


</script>

... achtet bitte oben in dem Skript auf diese ID (fadeshow1), auf die wir uns weiter unten dann zum Anzeigen der Fotos beziehen.

Bitte ändert oben im Skript die Angaben zu Euren Bildern und Texten (oben blau markiert) und kopiert Eure Bilder in das Verzeichnis:

./assets/images

der lokalen Publizierung und auf dem Server in das gleiche Verzeichnis oder lest diese in der Assets-Verwaltung direkt in NOF ein, damit NOF diese kennt. Achtet auch hier wieder auf die korrekte relative Pfadangabe, von der Startseite mit einem Punkt ./ oder von einer Unterseite mit 2 Punkten ../

Ihr könnt in diesem Skript die Dauer des Fade-Effekts einstellen und noch einige andere Dinge wie z.B. den Parameter “_new”, was einen Link mit dem Ziel in einem neuen Fenster bewirkt (_blank). Bitte lest dazu die weiterführenden Anleitungen bei Dynamicdrive und unten.

Um die Galerie dann auf der Seite anzuzeigen, zieht Ihr Euch ein Textfeld auf und fügt den Code unten in den HTML-Code Editor des Textfeldes ein. Damit setzt Ihr einen DIV-Container, der sich lediglich auf die oben im Skript gesetzte ID “fadeshow1” bezieht und somit die Slideshow startet.

<div id="fadeshow1"></div>

Beispiele für zusätzliche Einstellungen:

Wenn Ihr nicht wollt, dass die Slideshow bei Mausüber stoppt, dann könnt Ihr das in der Datei “fadeslideshow.js” in Zeile 79 ändern. Öffnet diese Datei mit Eurem Windows-Editor und ändert den Wert ismouseover=true in ismouseover=false

setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover

Bei dem Parameter descreveal könnt Ihr vier unterschiedliche Einstellungen eintragen:

ondemand = (Voreinstellung) zeigt eine eventuelle Beschreibung zum Bild bei Mausüber
always = zeigt eine solche Beschreibung automatisch mit jedem Bild dauerhaft
peekaboo = zeigt eine solche Beschreibung automatisch mit jedem Bild und wird eingeblendet
none = zeigt keine bereits eingetragene Beschreibung

Bemerkung:

Wenn Ihr in Eurer NOF-Navi eine Ausklappleiste verwendet, wird diese so noch nicht über die Wechselbilder ausklappen. Für das Ausklappen der NOF-Navigationsleiste ist die Datei “rollover.js” verantwortlich. In dieser Datei ist die Position der Ausklappleiste mittels eines “z-index” auf 5 gestellt und die Position (z-index) der Wechselbilder in der Datei fadeslideshow.js auf 1002, d.h. diese Position liegt weiter oben (vorne) als jene der Ausklappnavi.

Ihr müsstet also (ab NOF 11) am besten diese Datei “rollover.js” kopieren, die Ihr im Ordner “assets” der “Lokalen Publizierung” findet, also ungefähr hier ...

C:\Dokumente und Einstellungen\Admin\Eigene Dateien\NetObjects Fusion 12.0\User Sites\Projekt-Name\Lokale Publizierung\assets

... und diese Kopie z.B. umbenennen in “rollovereigen.js”. Dann öffnet diese Datei mit Eurem Windows-Editor und geht zur Zeile 18 und ändert dort den “z-index” der Ausklappnavi von 5 in einen höheren Wert als 1002 also z.B. 1003, damit der “z-index” der Navi höher ist als jener des Wechselbild-Skriptes. Dann bindet Ihr diese neue Datei in den “Master-Rahmen” dieser Seite ein, so wie auch hier beschrieben.

> markiere den Master-Rahmen der Seite, in der Du das Wechselbild-Skript eingebaut hast

> klicke im Fenster "Master-Rahmen-Eigenschaften" auf den mittleren Button "Reihenfolge beim Skriptimport"

> klicke unten auf das "+" Zeichen und füge in diesen Master-Rahmen (wähle den Punkt "Master-Rahmen") Deine neu bearbeitete Datei

rollovereigen.js

hinzu, sodass diese unter der alten "rollover.js" steht. NOF wird dann beide Dateien selbstständig publizieren und die Angaben der neuen Datei “rollovereigen.js” werden verwendet, da diese die Angaben der darüber liegenden “rollover.js” überschreiben.

Bei älteren NOF-Versionen kann man nur die Datei “rollover.js” händisch ändern und diese dann mit seinem FTP-Programm nachträglich auf den Server in den Ordner “assets” kopieren. Denkt dann aber daran, Euch diese so geänderte Datei zu sichern, da NOF diese Datei bei einer erneuten Publizierung wieder überschreiben wird.

nach oben

Viel Erfolg!