Sonntag, 29. November 2015

Fullscreen Rotation Hintergrundbild auf Blogspot

Oder wechselnde Fullscreen Hintergundbilder.

Das Einbinden eines 100%-Hintergrundbildes hatten wir ja schon.
Wer es noch nicht kennt, kann es hier nachlesen.

Was ist aber, wenn ich möchte, dass das Hintergrundbild wechseln soll?
So wie auf diesem Blog .
Eine GIF-Animation käme in Frage, aber dann habe ich nach der Erstellung nicht die Möglichkeit die Bilder schnell auszutauschen, Also Käse.

Gott sei Dank gibt es jQuery.
Genauer gesagt handelt es sich um das  jQuery Cycle Plugin.

Allerdings erweist sich das Einbinden in den Quellcode bei blogspot als etwas umständlicher.
Der XML-Editor parst einige Sachen einfach nicht so, wie der Erfinder das gerne hätte, wenn ich den Code in die HTML rein kopiere.
Insofern ist die externe Auszulagerung der Plugins eine vernünftige, schnelle Alternative.
Wer keinen eigenen Webspace hat, sollte sich überlegen, ob Dropbox oder ähnliche Dienste das ebenfalls ermöglichen. Ich selber nutze solche Dienste nicht, von daher beschränke ich mich darauf, die Dateien auf einem Server zu legen.

Wir benötigen folgende Sachen:
1. Unsere Bilder. Ich gehe im Beispiel auf drei Stück ein (meine Maße: 1280 x 800 px).
Ihr könnt natürlich soviele Pics verwenden wir Ihr wollt.
Meine Bilder habe ich übrigens von wallpaperswide.com
2. Etwas CSS-Eingabe direkt in die blogger-HTML, damit er weisst, wie sich die Hintergrundbilder verhalten sollen.Ausserdem den Bildern im Dashboard auf transparent stellen>> also ohne den Standardhintergrund.
Eine CSS für jQuery selbst, die wir entern auslagern (jquery.maximage.css).
3. Etwas HTML-Code.
4. Die Scripts zum Einbinden.

Also los gehts
Jagd Eure Bilder auf Picasa oder wohin Ihr wollt hoch und kopiert den Pfad zu den Bildern.
Ich verwende jpg's, aber ihr könnt auch andere Formate nehmen.

Unsere Scripts hier herunterladen (WinRar-Datei) .

JETZT GEHT ES NUR DARUM UNSEREN CODE EINZUBAUEN.
Dazu müssen wir über unser Dashboard in den HTML-Code hinein.

Kopiert als aller erstes diese CSS-Anweisung in Euren Blog hinein 
#maximage {
position:fixed !important; /* das ist die Box wo unsere Bilder hinein kommen*/
} 

Ferner unter Dashboard>Vorlage>>Anpassen>>Erweitert>>Bilder>>Hintergrundfarbe>>transparent

Anschließend alle drei Dateien aus dem WinRar-Verzeichnis entpacken und auf dem Server hochladen und den Pfad kopieren.

Die jquery.maximage.css setzen wir zwischen <head> und </head>

<link rel="stylesheet" href="Pfad-zur-Datei/jquery.maximage.css" type="text/css" media="screen" />

Jetzt bereiten wir unseser Bilder vor und setzen danach die Links zu den anderen beiden Dateien aus der WinRar-Datei drunter. Der folgende Code setzen wir gleich direkt in unsere HTML hinein direkt oben in den Body:

<div id="maximage"> <img src="Pfad-zur-Bild-1.jpg" alt="" />
<img src="Pfad-zur-Bild-2.jpg" alt="" />
<img src="Pfad-zur-Bild-3.jpg" alt="" />
usw
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script> <script src="Pfad-zur-Datei/jquery.cycle.all.js" type="text/javascript"></script>
<script src="Pfad-zur-Datei/jquery.maximage.js" type="text/javascript"></script>
<script type="text/javascript"> $(function(){ // Trigger maximage jQuery('#maximage').maximage(); }); </script>

Aber Vorsicht! Es kann durchaus sein, dass das ganze bei Euch nicht läuft. Es kann passieren, dass sich JavaScripts gegenseitig aushebeln.

Zugegeben, so eine Spielerei braucht man nicht unbedingt. Andererseits habe ich das schon ein paar mal gesehen und war neugierig zu sehen, ob sich das auch auf blogspot umsetzen lässt.

Keine Kommentare:

Kommentar veröffentlichen