Ultimate Fade-in slideshow (v2.1) von Dynamic Drive – In NOF einfügen.
Der beliebte Bilderwechsler mit sanftem Übergang von Dynamic Drive lässt sich problemlos in Netobjects Fusion einbauen.
Die Bilddarstellung in Netobjects könnt Ihr auf
dieser Seite sehen.
Wir benötigen dafür aus der Website von Dynamics folgende Dateien:
fadeslideshow.js
loading.gif
restore.png
x.png
Diese könnt Ihr direkt von der
Dynamics-Seite oder in unserem Anhang herunterladen.
dynamics.zip (Größe: 6,26 KB / Downloads: 110)
Die Nutzungsrechte sind hier dokumentiert:
http://dynamicdrive.com/notice.htm
Schritt eins: Bildbearbeitung und Einfügung:
Für solche Anwendungen Bilder immer vorher auf die gewünschte Größe bringen (alle Bilder sollen gleich groß sein), optimieren und benennen. Bei der Bennennung sollte man sich angewöhnen, Kleinschreibung und kurze Bildtitel zu verwenden und auf Sonderzeichen zu verzichten. Optimal zum Beispiel ist die Verwendung von bild1, bild2, bild3 usw.
Die für den Bilderwechsler benötigten Bilder werden in den Ordner assets/images der lokalen Publizierung eingefügt. Wer sich von diesem Schritt überfordert fühlt, kann es auf folgende Weise lösen: In NOF eine neue Seite erstellen, von der Navigation ausschließen. Bilder in diese Seite einfügen. Bei der nächsten Publizierung sind die Bilder automatisch im Ordner assets/images enthalten.
Schritt zwei: Für die Funktionsfähigkeit des Wechslers benötigte Dateien in den Ordner „assets“ per FTP-hochladen. Das sind:
assets.JPG (Größe: 23,21 KB / Downloads: 269)
Schritt drei: Code-Einfügung in die Netobjects-Seite
Wir öffnen die Seitenansicht. Mit Klick auf Taste F9 öffnet sich das fenster der Layout-Eigenschaften. Wir klicken auf die Schaltfläche „HTML“ und fügen den Code ein:
SeitenHTML.JPG (Größe: 112,35 KB / Downloads: 265)
Eingefügt wird folgender Code, der für NOF leicht modifiziert wurde:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./assets/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 of blank DIV on page to house Slideshow
dimensions: [371, 248], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["./assets/images/bild1.jpg", "", "", "Ein Tag in Berlin."],
["./assets/images/bild2.jpg", "http://www.nof-schule.de", "_new", "Tutorials der NOF-Schule!"],
["./assets/images/bild3.jpg"],
["./assets/images/bild4.jpg", "", "", "Das letzte Bild der Galerie."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})
</script>
Dieser Code enthält die Scripts für beide auf der Demo-Seite gezeigte Anwendungen. Man kann hier einiges im Editor selbst anpassen. Was auf jedem Fall angepasst werden muss:
- Die Größe der Anwendungen: Breite mal Höhe in Pixel wird unter „dimensions“ eingetragen (mein Beispiel 371, 248).
- Die Bildbezeichnung und die Pfade der Bilder. In meinem Beispiel heißen die Bilder bild1.jpg, bild2.jpg. Genau so steht es im Code. Im zweiten Script-Abschnitt wurden absolute Pfade zu den Bildern von Dynamic-Drive verwendet.
- Die Bildtitel falls welche verwendet werden
- Die Verlinkung zur externen Seite, falls eine verwendet wird.
Im Einzelfall sehen die Zeilen so aus:
1.Bild ohne Verlinkung, ohne Mouseover-Beschreibung:
Code:
["./assets/images/bild3.jpg"]
2.Bild mit Verlinkung, mit Mouseover-Beschreibung:
Code:
["./assets/images/bild2.jpg", "http://www.nof-schule.de", "_new", "Tutorials der NOF-Schule!"]
3.Bild ohne Verlinkung, mit Mouseover-Beschreibung:
Code:
["./assets/images/bild1.jpg", "", "", "Ein Tag in Berlin."]
Wichtige Anmerkung:
Befindet sich die Anwendungen auf der Startseite, lautet der Pfad wie oben eingetragen:
Code:
./assets/images/bild1.jpg
Befindet sich die Anwendung auf einer Unterseite, lautet der Pfad:
Code:
../assets/images/bild1.jpg
Tüftler werden mit den Angaben spielen können. Veränderungen im Script immer sehr behutsam durchführen. Sollten Fehler entstehen, so lohnt es sich oft, neu mit dem ursprünglichen Script anzufangen, statt nach Fehlern zu suchen.
Schritt 4: Codeeinfügung im Textfeld:
Für Anfänger:
Dieses Tutorial zeigt grundsätzlich, wie man externe Codes in NOF einfügt. Bitte durchlesen.
1. Für die normale Wechsler-Anwendung:
Wir fügen folgenden Code
vor dem Tag im Textfeld-HTML ein:
Code:
<div id="fadeshow1"></div>
<!--
Und
nach dem Tag fügen wir folgenden Code ein:
2. Für die Bilderwechsler-Anwendung mit Pfeilen vor- und rückwärts:
Wir fügen folgenden Code
vor dem Tag im Textfeld-HTML ein
Code:
<div id="fadeshow2"></div>
<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>
<!--
Bitte erstellt Eure Pfeile selbst und bindet sie im obigen Code anstelle der Links zu Tinypics ein.
Achtung: Bei nicht Verwendung eines Galerie-Typs (Beispiel ID_ Fadeshow2), diese Galerie aus dem Code löschen. Bei Verwendung von Galerie ID_fadeshow 2 Bild breite im Objekt-Code anpassen!
Und
nach dem Tag fügen wir folgenden Code ein:
Das war's, wir sind fertig. Schon in der lokalen Publizierung müsste der Wechsler zu sehen sein, wenn sich die benötigten Dateien im Assets-Ordner der lokalen Publizierung befinden.
Anmerkung:
Der Dynamics-Script verlinkt extern zur jquery-Datei. Wer lieber die jquery.js in dem Assets-Ordner einfügt, benötigt die jquery Version: 1.3.2.min. In diesem Fall müssen die Pfade zur Datei im obigen Script angepasst werden.
Die angehängte .zip-Datei ist eine Vorlage für NOF9, kann auch mit NOF10 und noch11 geöffnet werden.
Suche
Mitglieder
Kalender
Hilfe
