Style-Lifting Teil II: eine Slideshow für die Titelseite

In der Wordpress-Welt sind Layouts mit einer Slideshow auf der Titelseite des Blogs sehr beliebt. Der Grund ist einfach: sie sehen schick aus und bringen bei minimalistischem Design Bewegung und Abwechslung auf die Frontpage.

Innerhalb von Wordpress werden sie meist so programmiert, dass sie von einigen bestimmten Artikeln ("featured posts") abwechselnd die Titelbilder zusammen mit der Überschrift einblenden. So eine automatische Inhaltsfüllung der Slideshow ist unter Jimdo aber nur sehr schwer hinzubekommen, da der Zugriff auf die PHP-Datenbank (in der unter anderem die Blog-Artikel gespeichert sind) gesperrt ist. 

Nichtsdestotrotz ist eine Slideshow auf der Basis von Javascript auch unter Jimdo einfach einzubinden, nur müssen wir dann eben die Inhalte manuell einfüllen. So habe ich es auf der Titelseite unseres Blogs gemacht. Ausgangspunkt für die hier vorgestellte Slideshow ist das cycle-Plugin von malsup, welches auf die jquery-Bibliothek zugreift. Das wird auch im Wordpress-Theme Sight von WPShower benutzt, welches ich schon im vorhergehenden Artikel über das Style-Lifting vorgestellt habe.

 

Und wie funktioniert nun die Implementierung der Slideshow? 

Im folgenden seht Ihr den Teil des head unserer Seite, der die Javascript-Plugins einbindet, sowie die Größe und das Aussehen des Slideshow-Bereiches definiert:

<style type="text/css">

/*<![CDATA[*/

#slideshow, .slideshow {height: 290px; width: 100%; overflow: hidden; position: relative;}

#larr, #rarr {display: block; width: 32px; height: 53px; opacity: 0.2; z-index: 99 !important;}

#larr {background: #000 url("http://u.jimdo.com/www52/o/sef75ff72f4c92c7c/img/i2b78eee80b7dbed2/1372654879/std/image.png") 8px 50% no-repeat;}

#rarr {background: #000 url("http://u.jimdo.com/www52/o/sef75ff72f4c92c7c/img/i3d6e1bde3aa866af/1372654929/std/image.png") 11px 50% no-repeat;}

#larr:hover, #rarr:hover {opacity: 1;}

/*]]>*/

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">

//<![CDATA[

$(document).ready(function() {   

$('#slideshow').cycle( {               

fx: 'fade',               

timeout:'7000',               

next:   '#rarr',               

prev:   '#larr'       

});

});

//]]>

</script>

Die einzelnen Zeilen funktionieren wie folgt:

  • Der Stylesheet-Bereich definiert in der ersten Zeile die Größe des Slideshow-Kästchens und das Verhalten bezüglich Abschneiden von zu großen Bildern und Texten ("overflow:hidden"); Genauer gesagt sind es zwei gleich große Bereiche (das Element mit der ID #slideshow und die Klasse .slideshow), die später ineinanderstecken werden. Das dient der vereinfachten Einbindung der Vorwärts- / Rückwärtspfeile in die Slideshow.
  • In der 2. - 4. Zeile werden zwei Pfeilbilder eingebunden, die ich auf einer separaten versteckten Seite hochgeladen habe. So ein verstecktes Repository, auf dem alle Bilder stehen die man irgendwo im HTML-Quelltext einbinden möchte, ist die einzige Möglichkeit unter Jimdo Bilder hochzuladen ohne sie gleich irgendwo im Text zu sehen.
  • In der fünften Zeile wird definiert, dass diese Pfeilbilder beim Darüberfahren mit der Maus (":hover") stärker sichtbar sein sollen ("opacity:1");
  • Danach werden die Jquery-Bibliothek und das Cycle-Plugin in jeweils einer Zeile eingebunden;
  • Schließlich die wichtige Zeile, die definiert, dass die Slideshow sich im HTML-Element mit der ID="slideshow" abspielt, die HTML-Elemente mit der ID="rarr" und ID="larr" als Vorwärts- und Rückwärtspfeile beim Klicken funktionieren sollen, und die die Slideshow startet, wenn die HTML-Seite fertig geladen ist ("$(document).ready").

Dabei bezeichnet der Dezimalpunkt (".xyz") immer eine komplette Klasse, für die die Angabe gelten soll (also alle <div class="xyz">), und die Raute ("#xyz") ein bestimmtes Individuum (also <div id="xyz">). Weitere Hinweise zur Funktion von HTML, CSS und Javascript entnehmt Ihr am besten den umfangreichen Kompendien dazu im Netz, wie z.B. SelfHTML.

 

Und wie definiert man den Inhalt der Slideshow?

Nachdem nun Aussehen und Funktion der Slideshow definiert sind, müssen wir allerdings auf irgendeiner Seite unserer Homepage auch noch angeben, dass die Slideshow genau hier abgespielt wird und was ihr Inhalt sein soll. Dazu haben wird auf der Titelseite ganz oben ein HTML-Widget eingebunden, in dem genau das passiert:

<div class="slideshow">

<div id="slideshow">

<div style="width: 100%; height: 290px; overflow: hidden; background: #ffea97;">

<img style="float: left; margin-right: 20px; position: relative; top: -42px;" src="http://u.jimdo.com/www52/o/sef75ff72f4c92c7c/img/i0ab53c3d7e5ab8d4/1368300689/orig/reispapierrollen-sind-mit-frischen-kr%C3%A4utern-nudeln-und-gem%C3%BCse-gef%C3%BCllt-und-werden-nicht-gebraten.jpg" alt="" width="500" />

<div style="padding: 25px;">

<p style="font-family: Georgia, 'Times New Roman', serif;">WILLKOMMEN! </p>

<p style="text-align: justify;"> &#160; </p>

<h1 style="text-align: justify; font-weight:normal !important; font-family: Georgia, 'Times New Roman', serif;"> Kochen - Essen - Schreiben - Lesen </h1>

<p style="text-align: justify;"> &#160; </p>

<p style="text-align: justify;">Auf diesen Seiten möchten wir Euch unsere Geschichten und Bücher, sowie die besten Koch- und Backrezepte aus unserer Küche vorstellen.</p>

<p style="text-align: justify;">Viel Spaß beim Schmökern, Kochen und Genießen wünschen</p>

<p style="text-align: center;"><em>D. &amp; H. Kierey</em></p> 

</div>

</div>

<div style="width: 100%; height: 290px; overflow: hidden; background: #ffea97; display: none;">

/* hier kommt der Inhalt des 2. Slides rein */

</div>

<div style="width: 100%; height: 290px; overflow: hidden; background: #ffea97; display: none;">

/* hier kommt der Inhalt des 3. Slides rein */

</div>

<div style="width: 100%; height: 290px; overflow: hidden; background: #ffea97; display: none;">

/* hier kommt der Inhalt des 4. Slides rein */

</div>

</div>

<a href="#" id="larr" name="larr" style="position: absolute; top: 116px; left: 0;"></a>

<a href="#" id="rarr" name="rarr" style="position: absolute; top: 116px; right: 0;"></a>

</div>

Hier wieder eine kurze Erklärung des Programms:

  • <div class="slideshow"> ist ein Container, der die Slideshow umgrenzt und (am Ende des Quelltextes) die Vorwärts- / Rückwärtspfeile einbindet.
  • <div id="slideshow"> ist der Container für die eigentlich Slideshow. Alle first-level Child-Elemente in dieser Division werden als separate Folien behandelt und dargestellt.
  • <div style="width: 100% ... umschließt damit die erste Folie der Slideshow.
  • Ich denke die folgenden Zeilen sind soweit klar: hier ist einfach das in HTML codiert, was Ihr auf dem ersten Slide auf unserer Titelseite seht.
  • Interessant wirds dann wieder beim <div>-Container der 2. Folie: hier ist display:none gesetzt. Das hat den Sinn, dass man damit das Aufflackern der Folge-Folien beim Laden der Seite verhindern kann. Nur bei der ersten Folie fehlt diese Einstellung und nur diese ist beim Laden der Seite und vor Start der Slideshow sichtbar.
  • Fast zum Schluss werden die beiden Pfeile in den Außencontainer eingebunden. Da der Außencontainer seine Position fließend auf der Seite findet, kann man die Pfeile bequem per position: absolute; ... definieren. Das ist besonders wichtig bei Seiten mit relativer Breitenangabe im responsive design von Webseiten (siehe Details zum Thema position z.B. in SelfHTML).

So, genug getextet hier zu diesem Thema. Wenn Euch so eine Slideshow ebenfalls gefällt, dann zögert nicht und baut sie einfach ein. Man lernt die Details solcher Programmierung am besten, wenn man damit rumspielt.

 

Holger

Print Friendly and PDF

Kommentar schreiben

Kommentare: 0

Kontakt & Empfehlung:

Follow on Bloglovin

Jetzt online zum Download:

Klein. Fantastischer Roman
Klein. Fantastischer Roman

Rezept-Übersichten: