In a neon wilderness he was restless

Um einem bestimmten HTML-Blockelement ein Hintergrundbild mit Backstretch zuweisen zu können, ist es wichtig, dass dieses über eine eindeutige Kennung (ID) verfügt.

Beispiel:  <div id="meinekennung"></div>

Die meisten von Twoday definierten Template-Blockelemente besitzen i.d.R. eine ID oder Klassenzuordnung. Für eigene Blockelemente (z.B. in einem Blogbeitrag) sollten Sie auch eine eindeutige ID vergeben. Eindeutig heißt, dass auf Ihrer angezeigten Twoday-Webseite kein zweites Element dieselbe ID besitzt.

Im ersten Beispiel definieren wir im Text ein Blockelement (DIV) und weisen diesem per Backstretch ein Bild zu (siehe HTML und Javascript Tab).

Zur besseren Übersicht kann man sich das Zusammenspiel der einzelnen Komponenten auch in jsFiddle ansehen: Beispiel #1

<p>Im Beitragstext wird ein leeres weißes Blockelement (Breite 300 Pixel, Höhe 200 Pixel) definiert:</p>
<div id="twins" style="width:300px;height:200px;background:white;">
<p style="text-align:center;color:white;">Text im Blockelement mit der ID "twins"</p>
</div>

<script type="text/javascript">
$("#twins").backstretch("https://dl.dropboxusercontent.com/u/16775880/images/twintowers.jpg");
</script>

Dieses Script fügen Sie in der Hauptseite (Site.page) ein, und zwar direkt hinter die Zeile, mit der das Backstretch-Script eingebettet wurde (siehe 'Installation').

Zur Aktivierung der Galleriefunktion übergibt man Backstretch mehrere, durch Komma getrennte und in eckige Klammern eingebettete Bildadressen sowie verschiedene Zusatzparameter, die festlegen, wie die Bildabfolge ablaufen soll:

1. duration:nnnn Anzeigedauer eines Bildes in ms (nnnn)
2. fade:nnnn Überblendedauer in ms (nnnn)

Auch hierzu gibt es ein zugehöriges jsFiddle: Beispiel #2

<div id="bildgallerie"></div>

$("#bildgallerie").backstretch( [
	"https://dl.dropboxusercontent.com/u/16775880/images/obst.jpg",
	"https://dl.dropboxusercontent.com/u/16775880/images/erdbeeren.jpg",
	"https://dl.dropboxusercontent.com/u/16775880/images/beeren.jpg" ],
	{duration: 2000, fade: 750});
// Kommentar: 3 Bilder, Anzeigedauer jeweils 2 Sekunden, Übergang in 750ms

Eine Bildergallerie ist nicht auf selbstdefinierte Blockelemente beschränkt. Prinzipiell kann man jedes Blockelement, das eine eindeutige ID besitzt, von Backstretch mit Hintergründen versorgen lassen. Will man den gesamten Hintergrund der Webseite ausfüllen, lässt man den Selektor einfach weg.

Das zugehörige jsFiddle: Beispiel #3

$.backstretch( [
	"https://dl.dropboxusercontent.com/u/16775880/images/twintowers.jpg",
	"https://dl.dropboxusercontent.com/u/16775880/images/bigben.jpg" ],
	{duration: 3000, fade: 1500});
// Kommentar: 2 Bilder, Anzeigedauer jeweils 3s, Übergang in 1.5s

Backstretch-Anweisungen zur Änderung eines Hintergrundes können nicht nur automatisch beim Laden der Webseite ausgeführt werden, sondern nach Bedarf an bestimmte Ereignisse gekoppelt werden.

In diesem Beispiel verwende ich eine (stark) vereinfachte HTML-Struktur eines Twoday-Blogs mit zwei Beiträgen. Die Überschriften in Twoday-Blogbeiträgen (Element "h3") besitzen die CSS-Klasse "storyTitle" - sie können also einfach über den jQuery-Selektor "h3.storyTitle" für Veränderungen ausgewählt werden.

Nach dem Klick auf einen Button werden die Hintergründe aller "h3.storyTitle"-Überschriften durch Backstretch mit einer Grafik hinterlegt. Hier das entsprechende jsFiddle: Beispiel #4

Es gibt viele definierte Blockelemente in Twoday-Blogs, denen man mittels Backstretch einen einmaligen oder wechselnden Hintergrund zuweisen kann, so z.B.

• div#container Eigentlicher Seiteninhalt (Text und Sidebars)
• div#content Gesamtheit der angezeigten Blogbeiträge
• div.story Ein einzelner Blogbeitrag
• div.storyContent Textbereich des Blogbeitrags
• div.storyDate Autor und Erstellungsdatum
• div.storyLinks Links und Anzahl Kommentare
• div#sidebar01 Sidebar-Module
• und viele mehr.

$("#btnGrafikAktivieren").click(function(e) {
e.preventDefault();
$("h3.storyTitle").backstretch("https://dl.dropboxusercontent.com/u/16775880/images/headerbg.jpg");
});

Kann man dem eigenen Twoday-Blog beibringen, das angezeigte Hintergrundbild (wie auf manchen Smartphone-Widgets) tageszeitabhängig zu ändern? Yep, wenn auch hierzu ein Handvoll mehr Javascript-Zeilen erforderlich sind. Hier das entsprechende jsFiddle: Beispiel #5

Falls Sie das Script ausprobieren möchten, kopieren Sie es inkl. einleitendem <script type="text/javascript"> und schließendem </script>-Tag in die Hauptseite (Site.page), und zwar direkt hinter die Zeile, mit der das Backstretch-Script eingebettet wurde (siehe 'Installation'). Führen Sie außerdem folgende Script-Anpassungen durch:

1. Ändern Sie die Bildadresse (URL) in der Variablen bildurl auf die Adresse, unter der Ihre tageszeitabhängigen Bilder zu finden sind.
2. Ändern Sie die Variable bildervonbis dahingehend ab, dass in jeder Zeile ein Bildname, die Beginnstunde der Anzeige und die Bis-Stunde der Anzeige - jeweils durch Komma getrennt - aufgeführt sind.
3. Das Script legt die Bilder per $.backstretch(..) vollflächig auf den gesamten Webseitenhintergrund. Wollen Sie die zeitabhängigen Bildwechsel in einem anderen Blockelement durchführen, müssen Sie die Backstretch-Anweisung anpassen: z.B. $("#meinbildbereich").backstretch(..).