Animierte Kopfbilder mit Hilfe des Sliders
In weblica gibt es auf jeder Seite neben dem Logo auch ein so genanntes Kopfbild. Mit Hilfe des Slider-Absatzes ist es einfach möglich, statt eines einzelnen Bildes mehrere Bilder mit dynamischen Übergängen anzuzeigen. Der folgende Artikel erklärt, wie das geht.
Im Wesentlichen sind folgende Schritte nötig:
Im Wesentlichen sind folgende Schritte nötig:
- Grösse des Kopfbildes des gewählten Designs bestimmen.
- Einen Slider-Absatz auf der gewünschten Seite einfügen und die CSS-Klasse .headerSlider auf der Registerkarte CSS/HTML des Absatzes hinterlegen.
- Auf dem Slider-Absatz die gewünschten Bilder einfügen und die Grösse der Bilder auf die Grösse des Kopfbilds (siehe Schritt 1) zuschneiden.
- Einen HTML-Absatz einfügen mit der nötigen CSS-Regel und dem Javascript-Code für das Positionieren des Sliders im Kopfbild. Fertig!
Beispiel-Seite zum Downaload
Laden Sie die Datei Animierte_Kopfbilder_mit_Slider.wle herunter und importieren Sie diese in Ihr Projekt. Sie müssen dann nur noch die gewünschten Bilder auf dem Slider einfügen und die für das Design korrekte Grösse des Kopfbilds setzen. Fertig!
1. Grösse des Kopfbildes bestimmen
Die einzelnen Designs verwenden unterschiedlich grosse Kopfbilder. Die Grösse des Kopfbildes erfahren Sie in der Design-Übersicht im Info-Bereich für das jeweils gewählte Design, nachstehend illustriert am Design argon:
2. Einen Slider-Absatz auf der gewünschten Seite einfügen
Fügen Sie nun auf der Seite, z.B. im Hauptinhalt einen Slider-Absatz ein. Öffnen Sie dann die Absatz-Eigenschaften dieses Absatzes und wechseln Sie auf die Registerkarte CSS/HTML. Tragen Sie dort im Eingabefeld "Zusätzliche CSS-Klassen" folgendes ein:
headerSlider
3. Gewünschte Kopfbilder einfügen und Slider konfigurieren
Ziehen Sie nun die gewünschten Bilder, die Sie verwenden möchten, in den Slider.
Öffnen Sie dann die Absatz-Eigenschaften und legen Sie einerseits die Bildgrösse gemäss Schritt 1 fest und setzen Sie die gewünschten Animations-Einstellungen wie Effekt, Anzeige-Dauer, etc.
Öffnen Sie dann die Absatz-Eigenschaften und legen Sie einerseits die Bildgrösse gemäss Schritt 1 fest und setzen Sie die gewünschten Animations-Einstellungen wie Effekt, Anzeige-Dauer, etc.
4. HTML-Absatz für Javascript und CSS
Fügen Sie einen HTML-Absatz ein und hinterlegen Sie den nachstehenden Code:
<script type="text/javascript">
function headerDiv() {
var result = $("#headerPic");
if (result.length) return result;
return $("#header");
}
function moveSliderTo(target) {
target.empty();
$(".headerSlider, .headerSlider *").removeClass("paragraphBase");
$(".headerSlider").appendTo(target).show();
}
$(document).ready(function() {
moveSliderTo(headerDiv());
});
</script>
<style type="text/css">
.headerSlider {
display: none;
}
</style>
function headerDiv() {
var result = $("#headerPic");
if (result.length) return result;
return $("#header");
}
function moveSliderTo(target) {
target.empty();
$(".headerSlider, .headerSlider *").removeClass("paragraphBase");
$(".headerSlider").appendTo(target).show();
}
$(document).ready(function() {
moveSliderTo(headerDiv());
});
</script>
<style type="text/css">
.headerSlider {
display: none;
}
</style>
Dieser Code sorgt für die korrekte Positionierung und Anzeige der Kopfbilder im Kopfbereich.
Der Code funktioniert Design-übergreifend und muss somit nicht angepasst werden, wenn Sie das Design wechseln und dieses andere Grössenangaben für das Kopfbild verwendet; es genügt, wenn Sie die verwendeten Bilder auf die korrekte Kopfbildgrösse zuschneiden.
Der Code funktioniert Design-übergreifend und muss somit nicht angepasst werden, wenn Sie das Design wechseln und dieses andere Grössenangaben für das Kopfbild verwendet; es genügt, wenn Sie die verwendeten Bilder auf die korrekte Kopfbildgrösse zuschneiden.
Ihre Seite enthält nun mindestens die beiden folgenden Absätze:
Dieses Vorgehen wiederholen Sie auf jeder Seite, auf der Sie wechselnde Kopfbilder nutzen möchten. So können Sie die anzuzeigenden Bilder für jede Seite individuell festlegen.
- einen Slider für die Kopfbilder
- einen HTML-Absatz mit dem Javascript- und CSS-Code.
Dieses Vorgehen wiederholen Sie auf jeder Seite, auf der Sie wechselnde Kopfbilder nutzen möchten. So können Sie die anzuzeigenden Bilder für jede Seite individuell festlegen.
Dieses Vorgehen wiederholen Sie auf jeder Seite, auf der Sie wechselnde Kopfbilder nutzen möchten. So können Sie die anzuzeigenden Bilder für jede Seite individuell festlegen.
Wie es funktioniert
Der Javascript-Code
Der Javascript Code nutzt jQuery. Zuerst entfernen wir den aktuellen Inhalt aus dem Div-Element für das Header-Bild. Anschliessend wird das Div-Element des Slider-Absatzes per jQuery-Selector ausgewählt und zwar mittels der hinterlegten Klasse .headerSlider. Mit dem so selektierten Element machen wir dann folgendes:
- Wir entfernen die Klasse .paragraphBase, da wir den Inhalt des Sliders nicht als Absatz auf der Seite sondern im Kopfbereich anzeigen; somit benötigen wir diese Klasse nicht.
- Den Inhalt des Slider-Absatzes schieben wir dann in das Div-Element für den Header (Id #header oder #headerPic, abhängig vom Design).
- Wir Zeigen den Inhalt des Sliders mittels show() an.
Der CSS-Code
Der CSS-Code sorgt dafür, dass keine störenden Innen- und Aussenabstände angezeigt werden.
Zudem wird der Slider-Absatz mit display: none verborgen, so dass er zu Beginn nicht sichtbar ist. Warum? Weil wir damit erreichen, dass der Slider tatsächlich nur angezeigt wird, wenn er per Javascript in das Header-Div verschoben wurde. Darum rufen wir im Javascript-Code auch explizit show() auf. Hat nun der Besucher Javascript in seinem Browser ausgeschaltet, wird einfach das ursprünglich auf der Seite gesetzte Kopfbild angezeigt. Der Betrachter der Seite sieht dann zwar keine schön animierten Kopfbilder, aber eben auch keine falsch platzierten Kopfbilder irgendwo in der Seite.
Zudem wird der Slider-Absatz mit display: none verborgen, so dass er zu Beginn nicht sichtbar ist. Warum? Weil wir damit erreichen, dass der Slider tatsächlich nur angezeigt wird, wenn er per Javascript in das Header-Div verschoben wurde. Darum rufen wir im Javascript-Code auch explizit show() auf. Hat nun der Besucher Javascript in seinem Browser ausgeschaltet, wird einfach das ursprünglich auf der Seite gesetzte Kopfbild angezeigt. Der Betrachter der Seite sieht dann zwar keine schön animierten Kopfbilder, aber eben auch keine falsch platzierten Kopfbilder irgendwo in der Seite.
Sie möchten auf allen Seiten die gleiche Serie von Kopfbildern nutzen? Dann haben Sie zwei Möglichkeiten:
- Variante 1: Wenn Sie in Ihrem Auftritt durchgehend entweder die linke oder rechte Spalte nutzen, dann können Sie Slider- und HTML-Absatz in der entsprechenden Seitenspalte verwenden und auf den untergeordneten Seiten die Option Inhalt von übergeordneter Seite übernehmen für die entsprechende Spalte aktivieren.
- Variante 2: Packen Sie den Slider und den HTML-Absatz in einen einspaltigen Box-Absatz auf der Startseite. Verwenden Sie dann auf den weiteren Seiten einen Referenz-Absatz und verweisen Sie auf diesen Box-Absatz.