Backstretch Tutorial

Tutorials von Thomas Frei-Herrmann

Hintergrundbild Fullscreen Bild oder Fader

Als jQuery Plugin

Bitte guckt Euch für ausführliche Erklärungen und Beispiele dieses Plugins auch die Seite des Entwicklers an:

https://github.com/srobbin/jquery-backstretch

 

Zunächst benötigt Ihr zwei jQuery - Dateien.

  • jquery.min.js
  • jquery.backstretch.js - Version 2.0.1 vom 01.10.2012

Entpackt meine ZIP-Datei und kopiert diese beiden jQuery - Dateien in Eurer Verzeichnis “Assets” des Projektes.

Hier geht es zum Download dieser beiden jQuery - Dateien. Ich verwende hier die Version 2.0.1 vom 01.10.2012 der Datei jquery.backstretch.js

001-backstretch-2_0_1.zip. Downloads insgesamt seit 25.10.2012 : 917


Download-Counter - arturleinweber.de

jQuery-Dateien

Zum Einlesen der zu verwendenden jQuery-Dateien (hier: “jquery.min.js” und “jquery.backstretch.js”) geht Ihr folgendermaßen vor:

Diese Dateien lest Ihr dann nicht in der “Assets-Verwaltung” ein, sondern direkt im Fenster “Master-Rahmen-Eigenschaften”. Dort klickt Ihr auf den mittleren Button “Reihenfolge beim Skriptimport” und anschließend auf das “+” Zeichen unten links und wählt die .js Datei aus Eurem Verzeichnis “Assets”, in das Ihr diese Datei auf Euren PC bereits kopiert hattet, aus. Die neu eingelesene Datei wird von NOF zunächst unten an die Liste der jQuery-Dateien angehängt (hier: “jquery.min.js”).

... nun lest Ihr die nächste .js Datei ein (hier: “jquery.backstretch.js“). Wie Ihr im Screenshot oben erkennen könnt, habe ich die zuerst eingelesene Datei “jquery.min.js” nun mittels der Pfeile, unten rechts im Fenster, weiter nach oben verschoben, damit die Datei “navbar.js” von NOF nun unter der neuen jQuery-Datei liegt, da sonst die Navi von NOF nicht funktionieren würde. Auf diese Art und Weise ist es also möglich diese Dateien in beliebiger Reihenfolge in NOF zu platzieren.

Einzelnes Bild:

Nun kopiert Ihr das Skript unten in die HTML des Layouts.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > Skript am “Ende des Haupttextes” einfügen, vor dem schließenden </BODY>

Bitte achtet dabei wieder auf die korrekte relative Pfadangabe zum Bild, hier von einer Unterseite. Von der Startseite nur mit einem Punkt ./

Ohne Fade-Effekt

Mit Fade-Effekt

<script>
   $.backstretch("../assets/images/UnterWasser-001.jpg");
</script>

<script>
   $.backstretch([
      "../assets/images/UnterWasser-001.jpg"
      ], {
      fade: 750
   });
</script>

Diashow:

Kopiert das Skript unten in die HTML des Layouts.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > und das Skript am “Ende des Haupttextes” einfügen (also vor dem </BODY>)

Bitte achtet dabei wieder auf die korrekte relative Pfadangabe zu den Bildern, hier von einer Unterseite. Von der Startseite nur mit einem Punkt ./

<script>
   $.backstretch([
      "../assets/images/UnterWasser-001.jpg",
      "../assets/images/UnterWasser-002.jpg",
      "../assets/images/UnterWasser-003.jpg"
      ], {
      fade: 750,
      duration: 6000
   });
</script>

Natürlich müsst Iht das Skript noch mit den Dateinamen Eurer Bilder versehen und diese entweder in der Assets-Verwaltung einbinden oder händisch mit Eurem FTP-Programm in Eurer Verzeichnis

/assets/images/

kopieren. Ihr könnt natürlich auch noch beliebig viele Bilder hinzufügen und die Zeit der Überblendung (fade) sowie die Zeit der Bildanzeige (duration) in Millisekunden ändern.

Viel Erfolg!

diese Seite weiter empfehlen



Counter Statistik