Impressum Suchfunktion

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
Bildwechsler_mit_sanftem_Uebergang_DynamicDrive
#1
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.


.zip   dynamics.zip (Größe: 6,26 KB / Downloads: 277)


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:



.jpg  assets.JPG (Größe: 23,21 KB / Downloads: 706)




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:


.jpg  SeitenHTML.JPG (Größe: 112,35 KB / Downloads: 671)


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 im Textfeld-HTML ein:

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



2. Für die Bilderwechsler-Anwendung mit Pfeilen vor- und rückwärts:


Wir fügen folgenden Code 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:

Code:
-->

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.


Angehängte Dateien
.zip   Dynamics_Bilderwechsler.zip (Größe: 413,63 KB / Downloads: 148)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#2
Hinweise für Tüftler:

Seit Entstehung dieses Tutorials habe ich die Anwendung öfter in Websites eingebaut. Einziges Problem: Bei dem vorgegebenen NOF-Doctype (nicht valide, ausser NOF12) schaltet der IE den sog. Quirks- oder Kompatibilitätsmode ein und verursacht kleine lästige Fehler in der Darstellung von jquery-Anwendungen.

Eine Anpassung des Doctypes löst dieses Problem. Dies habe ich allerdings im Tutorial nicht vorgeschlagen, weil die Anpassung des Doctypes nach meiner Erfahrung bei komplexen Layouts mit Klassen in Tabellen Probleme verursachen kann.

Inzwischen habe ich mich auf eine Vorgehensweise festgelegt, bei der 100% sauberen Code und eine einwandfreie Darstellung im IE gewährleistet:

Beispiel: NOF-Schule-Startseite. Der hier beschriebene Bilderwechsler liegt in einem iframe.

Im Projekt habe ich zwei Seiten für den Wechsler eingerichtet, sie aus der Navigation ausgeschlosssen.

Seite: "Faderobjekte" enthält die Bilder
Seite: "wechsler" (neuer Masterrahmen > Zero-margins) enthält die Skripts für die Wechsleranwendung. Auf dieser Seite wurde der Doctype angepasst. Der Quellcode ist sowohl auf der Startseite (mit iframe) als auch auf Seite "Wechsler" fehlerfrei.

Weitere Auskünfte:

Methoden zum Doctype auswechseln

Einen iframe in NOF einbauen



Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Thema geschlossen 




Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!