WordPress, F8 Lite, Slideshow, Jquery – und eine Lösung

So, genug SEO mit dem Titel betrieben, jetzt ist es Zeit für das zweite Anliegen, nämlich etwas für die Online-Reputation tun, von wegen Technik-Kompetenz und so. In dieser Folge: Im WordPress-Theme F8 Lite eine Slideshow einbauen (respektive verwenden), die nur aus Bildern besteht. So wie das bei Elisabetta Lombardo Photography (dort nur auf der Startseite), oder bei den Spreesprossen (dort überall).

Sieht eigentlich in CSS3- und HTML5-Zeiten gar nicht so nach Star Trek aus, bedarf aber in den neueren Versionen des Themes einer kleinen Anpassung. (Bei Elisabettas Seite haben wir das Theme noch nicht wieder aktualisiert – aufgrund der Modifikationen gliche das auch einem Fangespiel mit Randalierkobolden.) Zu einer Lösung habe ich bereits in PC-Achievements dank WordPress gebloggt, diese funktioniert jedoch mit neueren Versionen des Themes nicht mehr.

Was gibt es zu beachten?

Trivial: Alle Bilder sollten in der gleichen Größe vorliegen und natürlich möglichst bandbreiten- und qualitätsschonend abgespeichert worden sein. Und natürlich Sicherheitskopien aller Dateien, die im Laufe des Prozesses angefasst werden, weil sich diese nicht mit den WordPress-Bordmitteln zurücksetzen lassen. Wann immer WordPress die Möglichkeit zwischen visueller und HTML-Bearbeitung bietet, letztere wählen, sonst wird Quellcode kaskadiert und funktioniert nicht mehr.

(Jquery-Aktualisierungen würde ich mal nicht empfehlen, denn diese für die unmittelbare Funktionsweise nicht erforderlich. Im Anschluss an die eigentliche Reparatur spricht nichts dagegen, ein neues jquery einzubauen und zu schauen, ob davon irgendeine bestehende Theme-Funktion betroffen ist.)

Also dann, auf geht’s.

  1. Ggf. jquery-Innerfade-Plugin einbinden. Hierbei handelt sich um eine kleine Javascript-Datei, in welcher der Übergangseffekt für die Slideshow gespeichert ist. (An dieser Stelle erneut: Ja, das ginge mit neuen jquery-Versionen einfacher, aber es geht hier ja nicht um Code-Optimierung, sondern eine möglichst funktionierende Gipsung des Bohrloches.) Zunächst überprüfen, ob die Datei vorhanden ist (im FTP-Programm oder web-basierten Datei-Browser im Verzeichnis themes/f8-lite/js. Wenn nein, danach suchen und entsprechend hochladen. In der header.php im Bereich mit den ganzen eingebundenen Skript-Dateien wie folgt einbauen:
    <script type=”text/javascript” src=”http://www.[Domainname].de/wp-content/themes/f8-lite/js/jquery.innerfade.js”></script>
  2. In der home.php oder index.php das große img-Tag finden. Sieht wahrscheinlich so aus:
    <img src=”http://www.[Domainname].de/wp-content/uploads/2011/04/Dateiname.jpg” width=”950″ height=”425″ alt=”Wordpress titel” />, möglicherweise mit entsprechend geänderten Parametern. Das auskommentieren und ersetzen durch eine Liste wie folgt:
    <ul id=”portfolio” style=”position: relative; height: 425px; width:950px; overflow: hidden; margin: 0px; “>
    <li style=”z-index: 3; position: absolute; display: list-item; “><img src=”[kompletter HTTP-Link zum ersten Bild]” /></li>
    <li style=”z-index: 2; position: absolute; display: none; “><img src=”[kompletter HTTP-Link zum zweiten Bild]” /></li>
    <li style=”z-index: 1; position: absolute; display: none; “><img src=”[kompletter HTTP-Link zum dritten Bild]”></li>
    </ul>
    Das CSS des Themes sollte an dieser Stelle dafür sorgen, dass keine Bullet Points oder ähnliches in der Liste zu sehen ist. Selbstverständlich lässt sich das vergleichsweise hässliche inline-CSS in Teilen später noch artig in richtige CSS-Dateien auslagern (zum Beispiel ul#portfolio li {position: absolute;} ), aber für den Anfang tut’s das. Und selbstverständlich sind auch mehr als drei Bilder möglich.
  3. Die Zeilen direkt darunter durch den folgenden Code ersetzen:
    <script type=”text/javascript”>
    var $j = jQuery.noConflict();
    $j(document).ready( function(){
    $j(‘ul#portfolio’).innerfade({ speed: 1000, timeout: 5000, type: ‘sequence’, containerheight: ‘435px’ }); } );
    </script>
    Die Brücke mit $j statt dem in jquery üblichen $ sorgt dafür, dass die sonst auftretenden Probleme durch die noConflict-Kaskadierung nicht auftreten. Wie gesagt nicht elegant, aber funktionabel. Bei innerfade lassen sich einige Parameter angeben.

Das war’s auch schon. Ich hatte jetzt länger nicht direkt mit dem Theme zu tun, vielleicht ist so ein Gefriemel gar nicht mehr nötig, aber es scheint, die Suche nach vernünftigen Slideshow-Lösungen treibt doch relativ viele Sucher hierher, also wollte ich dieses Wissen weitergeben. (Zudem schadet Monokultur, es war Zeit für etwas anderes zwischen den ganzen Landtagswahl-Beiträgen.)

Leave a Reply

Your email address will not be published. Required fields are marked *