Eine beliebte und weitverbreitete Methode Bilder, Videos oder andere Inhalte einer Website darzustellen ist die sogenannte Lightbox. Diese öffnet den gewünschten Inhalt in einem extra Fenster und verdunkelt derweil den Hintergrund. Im Folgenden möchte ich zeigen, wie man ohne Plugin die jQuery Lightbox prettyPhoto in ein WordPress-Theme einbaut.

jQuery Lightbox prettyPhoto

In vielen meiner Themes ist die jQuery Lightbox prettyPhoto bereits eingebaut. Persönlich finde ich prettyPhoto eines der schickesten jQuery-Lightbox-Plugins (nicht WordPress-Plugin!) und möchte daher zeigen, wie man es auf korrekte Weise und ohne WordPress-Plugin in ein Theme integriert.

Drück mich für eine Demo

Folgender Content kann von prettyPhoto in der Lightox dargestellt werden:

• Einzelbild
• Bildergelerie (mit Navigation)
• Flash
• YouTube-Videos
• Vimeo-Videos
• QuickTime-Videos
• iFrames (externe Websites)
• Inline Content (HTML-Elemente)
• Galerie aus gemischten Inhalten

Herunterladen von prettyPhoto

Zunächst laden wir uns das Original-Skript von der Website des Plugin-Autors Stephane Caron.

komprimierte Version | unkomprimierte Version

Den heruntergeladenen ZIP-Ordner entpacken wir und laden die darin enthaltenen Ordner /css, /images und /js in einen Ordner unseres WordPress-Themes z. B. /wp-content/themes/**dein-theme**/pretty/.

Einbinden von jQuery

Um die prettyPhoto-Lightbox nutzen zu können, müssen wir zunächst die Javascript-Bibliothek jQuery aktivieren bzw. in userem Theme-Header laden.

Jede WordPress-Installation bringt jQuery, da es sehr häufig verwendet wird, von Haus mit. Folgender Aufruf in der functions.php des Themes läd die nötige Datei:

<?php
add_action('wp_enqueue_scripts', 'wdm_scripts');
function wdm_scripts() {
    wp_enqueue_script('jquery');
}
?>

Eine Übersicht aller in WordPress bereits enthaltenen Skripte findet Ihr im WordPress-Codex.

Einbinden von prettyPhoto

Auch um die Skripte von prettyPhoto in den Head-Bereich unseres WordPress-Themes in der functions.php zu laden, behelfen wir uns wie bei dem allgemeinen jQuery-Skript der Funktionen wp_enqueue_script() und wp_enqueue_style().

Es müssen zwei Dateien eingebunden werden. Eine davon ist die Javascript-Datei /wp-content/themes/**dein-theme**/pretty/js/jquery.prettyPhoto.js und die andere ist das Stylesheet /wp-content/themes/**dein-theme**/pretty/css/prettyPhoto.css (s. a. Ordnerstruktur beim Upload).

<?php
add_action('wp_enqueue_scripts', 'wdm_scripts');
function wdm_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('pretty', get_bloginfo('template_url').'/pretty/js/jquery.prettyPhoto.js', array('jquery'), '2.5.6', false);
    wp_enqueue_style('pretty', get_bloginfo('template_url').'/pretty/css/prettyPhoto.css', false, '2.5.6', 'all' );
}
?>

Im WordPress-Codex gibt es weitere Informationen zu wp_enqueue_script() und wp_enqueue_style().

Konfiguration von prettyPhoto

Alle nötigen Skripte sind bereits eingebunden. Nun muss die jQuery-Lightbox noch gesagt bekommen, wie, wann und wo sie funktionieren soll. Auf der Seite der Dokumentation von prettyPhoto finden wir, dass folgendes Skript in den Head-Bereich eingebunden werden muss:

<script type="text/javascript">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Achtung! Beim Einbinden in WordPress ist zu beachten, dass jQuery im sogenannten no conflict mode geladen wird. Das ist bei der Konfiguration von prettyPhoto wichtig.

prettyPhoto im no conflict mode

Der Javscript-Aufruf muss daher um sogenannte no conflict wrapper erweitert werden, damit die Lightbox funktioniert:

<script type="text/javascript">
(function($) {
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
})(jQuery);
</script>

Weitere Informationen zu der Methode der no conflict wrapper gibt es im WordPress-Codex.

Einbinden in der functions.php

Um das Theme nicht direkt in die header.php des WordPress-Themes einzufügen, behelfen wir uns der WordPress-Action wp_head, mit der man in der functions.php den Theme-Header erweitern kann:

<?php
add_action('wp_head','wdm_theme_head');
function wdm_theme_head() { ?>
<script type="text/javascript">
(function($) {
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
})(jQuery);
</script>
<?php } ?>

Weitere Informationen zu Optionen und der Anpassung von prettyPhoto findet Ihr in der Dokumentation.

Aufruf von prettyPhoto

Mit der obigen Konfiguration der jQuery-Lightbox lässt sich diese mit jedem a-Tag mit rel="prettyPhoto" öffnen. Der zu verwendene Code im Post-Content oder in einem Theme-Template könnte also wie folgt aussehen:

<a href="http://domain.de/dein/bild.jpg" rel="prettyPhoto">Lightbox aufrufen</a>

Drück mich für eine Demo

Weitere Möglichkeiten Inhalte in die prettyPhoto-Lightbox zu laden, findet Ihr in den Demos des Skriptes.

Fazit

Letztlich muss jeder selbst wissen, ob es einfacher ist ein Plugin zu installieren oder das Skript zu Fuß einzubinden. Ich verzichte gerne auf Plugins, wenn diese möglich ist und ich das Wissen habe, den Code selbst einzubauen.

Den ThemeShift-Kunden gefällt dieses eingebaute Feature auf jeden Fall. In Kombination mit WordPress-Funktionen lassen sich mit dieser jQuery-Lightbox umfangreiche und vor allem ansprechende Galerien bauen.

Relevante Links

• jQuery Lightbox prettyPhoto | Dokumentation
• WordPress Codex: wp_enqueue_script()
• WordPress Codex: wp_enqueue_style()
• WordPress Codex: no conflict wrapper

Die Lokalisierung / Übersetzung von WordPress-Themes ist eine von mir bisher sträflich wenig beachtete Funktion von WordPress. Dabei kann man mit einem relativ geringen Mehraufwand einen gehörigen Mehrwert in Sachen Interantionalisierung von Themes schaffen.

Warum lokalisieren?

Die Vorteile, den kleinen Mehraufwand bei der Erstellung eines WordPress-Themes in Kauf zu nehmen und dieses zu lokalisieren, liegen auf der Hand. Mit gesonderten Sprachdateien lässt sich das Theme unabhängig vom Quellcode, den man dafür dann nicht mehr anrühren muss, in beliebig viele Sprachen übersetzen.

Die WordPress-Installation selbst ist in Sachen Intarnationalisierung und Übersetzung schon weit gediehen und es gibt bereits unzählige Übersetzungen für den WordPress-Admin. Dann sollten wir beim Theme nicht aufhören.

WordPress verwendet GetText:

Um WordPress-Themes zu lokalisieren verwendet WordPress eine Übersetzungsanwendung namens GetText. Mit dieser Anwendung ist es relativ einfach, WordPress zusagen, was wo und womit übersetzt werden soll. Mehr dazu im Detail.

HTML-Strings übersetzbar machen:

Nehmen wir an, wir wollen in userem Theme einen Titel der Sidebar übersetzen. Dort steht im Quellcode folgendes:

<h4>Recent Articles</h4>

Um diesen HTML-String nun per GetText übersetzbar zu machen, müssen wir ihn in einen GetText-Call packen, den viele Theme-Designer von Euch sicherlich schon gesehen haben und der wie folgt aussieht:

<h4><?php _e('Recent Articles', my_theme_name); ?></h4>

Bemerkung:
Hiermit rufen wir die GetText-Funktion _e() auf und sagen ihr, was womit übersetzt werden soll und dass die Übersetzung an dieser Stelle ausgegeben werden soll (PHP: echo). Der erste Parameter in der Klammer sagt, was übersetzt werden soll und der zweite (my_theme_name) sagt WordPress, wo die Übersetzung zu finden ist (dazu später mehr),

GetText in WordPress-Funktionen:

Sicherlich sind Euch auch schon WordPress-Funktionen bekannt, in denen verschiedene Strings verarbeitet werden. Ein Beispiel ist der Aufruf der Anzahl der Kommentare:

<?php comments_number(__('No comments',my_theme_name), __('One comment',my_theme_name), __( '% comments',my_theme_name) );?>

Bemerkung:
In der Funktion comments_number() können wir drei Strings für drei mögliche Fälle übergeben (kein, 1 und x Kommentare). Wie ihr vielleicht seht, rufen wir jedoch jetzt die GetText-Funktion __() auf. Auch diese sagt WordPress was womit übersetzt werden soll, doch nun wird die Übersetzung an dieser Stelle nicht ausgegeben (PHP: kein echo), sondern kann als String von PHP weiterverarbeitet werden.

Text-Domains:

Der Name ist ein wenig irreführend. Es geht um den zweiten Parameter in den GetText-Calls (my_theme_name). Dieser ist optional und hilft WordPress die richtige Übersetzung zu finden. Es kann nämlich vorkommen, dass z. B. in einem Plugin, das wir verwenden, der gleiche String übersetzt werden soll. Mit unserer eindeutigen Text-Domain können wir klar bestimmen, welche Übersetzung gewählt werden soll. Die Text-Domain kann der Theme-Name sein, mit dem man auch den Theme-Ordner benannt hat (z. B. ‘decoder’ oder ‘my_theme_name’).

Vorbereiten und Erstellen der Sprachdatei:

Angenommen wir haben jetzt überall in unseren Theme diese zu übersetzenden Strings verteilt. Als nächstes wollen wir diese in einer Liste ausgeben, um sie weiterverarbeiten zu können.

PHP to .po extractor

Diese Liste, mit der wir auch die Übersetzung machen ist eine .po-Datei (Portable Object). Um nun aus den php-Dateien unseres Themes die Liste in der .po-Datei zu erstellen, gibt es PHP to .po extractor, mit denen wir einzelne Dateien aber auch Zip-Archive verarbeiten können. Dieser sucht alle Strings, die in _e() und __() Funktionen gepackt sind und gibt uns die .po-Datei zurück.

Übersetzen aller Strings in der .po-Datei:

Um .po-Dateien verarbeiten zu können, solltet Ihr Euch das Programm Poedit herunterladen. Mit diesem Programm lassen sich die Übersetzungen einfach und übersichtlich anfertigen. Beim Abspeichern unserer .po-Datei wird automatisch eine .mo-Datei erstellt, die letztlich die Sprachdatei ist, die WordPress benötigt. Die .po-Datei ist sozusagen nur die Bearabeitungsdatei.

Sprachdateien bearbeiten mit Poedit

Wichtig beim Erstellen der Sprachdateien sind noch die Sprach- und Ländercodes, mit denen wir die Sprachfiles benennen. Eine Sprachdatei für Deutsch aus Deutschland müsste also de_DE.po / de_DE.mo heißen. Für Schweizer Deutsch dementsprechend de_CH.po / de_CH.mo.

Laden der Text-Domain:

Wenn wir die .po/.mo-Dateien in unserem Theme-Ordner platziert haben, sagen wir WordPress, dass in unserem Theme eine Übersetzung geladen werden soll.

<?php load_theme_textdomain(my_theme_name); ?>

Bemerkung:
Diesen Aufruf platzieren wir am besten in der header.php, da diese bei jedem Seitenaufruf angesprochen wird.

Wenn WordPress nun das Sprachfile für die Sprache findet, die in der wp-config.php angegeben ist, wird das Theme mit allen Übersetzungen richtig angezeigt.

define ('WPLANG', 'de_DE');

// edit:

Alternative per Plugin:

Wenn einem das Installieren von Poedit und das externe Scannen der PHP-Dateien zum umständlich ist, kann man das Ganze auch WordPress-intern lösen. Das WordPress-Plugin Codestyling Localization scheint mir dafür eine starke Alternative zu sein. Ich habe es selbst noch nicht getestet, werde das aber auf jeden Fall nachholen.

Danke an sokai für den Tipp!

// end edit;

Fazit:

Die Lokalisierung von WordPress-Themes sollte für Theme-Autoren zum Standard gehören. Wenn man diese Routine einmal durchlaufen ist, hält sich der Mehraufwand tatsächlich in Grenzen und das Theme wird dem internationalen Charakter von WordPress gerecht.

Relevante Links:

• WordPress Codex Translating WordPress
• WordPress Codex WordPress in You Language
• Poedit zum Verarbeiten von .po-Dateien
• PHP Text-Scanner zum Erstellen der .po-Dateien
• How to localize WordPress themes and plugins with GetText
• WordPress Themes lokalisieren /// ZyBlog

Im Webdesign allgemein und in WordPress-Themes ist es sehr praktisch, automatische Thumbnails eines Fotos zu erstellen und es in der Größe an das Layout anzupassen. So kann man z. B. auf der Startseite einen Thumb anzeigen und im Post selbst eine Großansicht – und alles mit einer Bilddatei.

Das Ganze hört sich kompliziert an, ist aber dank nützlicher Open-Source-Skripte heller Köpfe relativ einfach in eine Website zu integrieren.

Besagtes Skript, das ich häufig zum Image-Resizing nehme, heißt TimThumb und wurde ursprünglich für das WordPress-Theme Mimbo Pro geschrieben und letztes Jahr als Open-Source-Projekt für jedermann zugänglich gemacht.

Dem Skript TimThumb muss man lediglich sagen, welche Datei bearbeitet und wie diese ausgegeben werden soll. Folgende Parameter stehen dafür zur Verfügung.

Parameter:

• w: width – Breite des Bildes
• h: height – Höhe des Bildes
• zc: zoom crop (0 oder 1) – Beschneidung des Bildes (wenn nötig)
• q: quality (default ist 75 und max ist 100) – Ausgabequalität

Anwendung

<img src='/skripte/timthumb.php?src=/img/bild.jpg&h=180&w=180&zc=1&q=95' alt='' />

Bemerkung:
Im obigen Beispiel nehmen wir an, dass wir z. B. in einer index.html ein Bild eingefügt werden soll. Der Bilderordner ist /img/ und das Skript TimThumb liegt im Ordner /skripte/. Wir sprechen das Skript an und übergeben die nötigen Parameter.

Installation

• Herunterladen des Skriptes – TimThumb
• Erzeugen des Ordners /cache/ – muss im selben Ordner liegen wie timthumb.php und volle Schreibrechte (777) besitzen
• Auch der Ordner, der TimThumb enthält, sollte volle Schreibrechte (777) besitzen
• Optional: Um die Performance zu verbessern, kann die .htaccess noch erweitert werden

Automatische Thumbnails in einem WordPress-Theme

Unser Ziel ist es nun, einen Post mit einer Bilddatei zu erstellen und zum Einen einen Thumbnail und zum Anderen eine Großansicht dieses Bildes zu erzeugen.

Voraussetzungen sind:

• Das Bild liegt im Ordner /img/ im Hauptverzeichnis der WordPress-Installation
• timthumb.php liegt im Order (Chmod 777) /skripte/ des WordPress-Theme-Ordners
• Der Ordner /skripte/ enthält den Unterordner (Chmod 777) /cache/

Damit wir das Bild mit dem Skript erfassen können, legen wir uns einen Post mit einem Spezialfeld namens ‘post-img’ an. Als Wert bekommt dieses Spezialfeld die URL des zu verarbeitenden Bildes (z. B. ‘http://webdemar.com/img/bild.jpg’).

Den Spezialfeld des Posts können wir innerhalb des Loops in unserem WordPress-Theme ausgeben – z. B. in der home.php (genauer möchte ich darauf an dieser Stelle nicht eingehen, da dies zu weit führen würde).

<?php echo get_post_meta($post->ID, 'post-img', true) ?>

Bemerkung:
Mit diesem Aufruf würde die URL des Bildes ausgegeben. Das machen wir uns zunutze und konstruieren damit die erforderliche Ausgabe (s. Anwendung) zum Ansprechen von TimThumb.

<img src='<?php bloginfo('template_url'); ?>/skripte/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&w=120&h=80&zc=1&q=95' width='120' height='80' alt='<?php the_title(); ?>' />

Bemerkung:
Hiermit geben wir das Bild, das wir im Spezialfeld des Posts angegeben haben, als Thumbnail 120x80px, wenn nötig zugeschnitten und in einer Qualität von 95 (von 100) aus.

Breite und Höhe lassen sich nun beliebig anpassen, so dass z. B. in der single.php des Themes dasselbe Bild mit einer Größe von 240x160px ausgegeben werden kann. Wichtig ist dabei, dass width und height des img-Tags ebenfalls angepasst werden.

Man kann das Ganze nun noch einen Schritt verbessern, indem man vor dem Aufruf des Bildes mit der URL aus dem Spezialfeld zunächst abfragt, ob dieses auch vorhanden ist. Wenn das Spezialfeld in einem Post leer bleibt, würde sonst ein img-Tag ohne src erzeugt.

<?php if(get_post_meta($post->ID, 'post-img', true)) { ?>
    <img src='<?php bloginfo('template_url'); ?>/skripte/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&w=120&h=80&zc=1&q=95' width='120' height='80' alt='<?php the_title(); ?>' />
<?php } // endif post-img ?>

Bemerkung:
Bei einem leeren Spezialfeld wird nun einfach nichts ausgegeben.

Fazit:

Mit TimThumb lassen sich also automatisch über das Theme gesteuert beliebig viele Thumbnails eines einzigen Bildes erstellen.

Relevante Links:

• Google-Code Projektseite von TimThumb
• Quellcode timthumb.php
• Release-Post von Darren Hoyt
• Support-Forum für TimThumb

Sliding-Content sieht man im Webdesign und WordPress Themes heute sehr häufig. Durch jQuery und kluge Köpfe, die Plugins dafür schreiben, ist dies auch ohne große Programmierkenntnisse möglich. In diesem Tutorial beschreibe die Verwendung von jFlow – ein einfach zu verwendendes jQuery-Plugin.

Was soll am Ende dabei herauskommen?

Damit wir wissen, worum es geht, sollten wir uns zunächsts erstmal ein › Beispiel ansehen.

Download jFlow 1.2

Die nötigen Dateien laden wir uns im Gesamtpaket jFlow 1.2 herunter.

Einbinden der Skripte

Zunächst legen wir uns eine neue html-Datei an (z. B. index.html) und binden im Head-Bereich dieser Datei die nötigen Skripte ein.

Als erstes laden wir die jQuery-Library per Google-Api. Ebenfalls könnte man sich aber auch die letzte jQuery-Version herunterladen und diese einbinden.

<script language='javascript' type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>

Der zweite Schritt ist das Einbinden des jFlow-Skriptes. In diesem Beispiel liegt die index.html im Root-Verzeichnis und das Skript im Order /js.

<script src='js/jquery.flow.1.2.js' type='text/javascript'></script>

Anlegen des Contents

Wir erzeugen drei div-Container, die nachher geslidet werden sollen. In jedem Slide ist ein Bild (aus dem Ordner /img), eine Überschrift und ein wenig Text enthalten.

Diese drei divs packen wir der Ordnung halber in einen weiteren div mit der ID content-slider. So können wir das Ganze über CSS besser formatieren und positionieren und auch für jFlow ist dies wichtig.

<div id='content-slider'>

  <div id='slide1'>
    <img src='img/slide1.jpg' alt='slide1' width='425' height='282'/>
    <h1>Slide1</h1>
    <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
  </div>

  <div id='slide2'>
    <img src='img/slide2.jpg' alt='slide2' width='425' height='282'/>
    <h1>Slide2</h1>
    <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
  </div>

  <div id='slide3'>
    <img src='img/slide3.jpg' alt='slide3' width='425' height='282'/>
    <h1>Slide3</h1>
    <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
  </div>

</div><!-- end content-slider -->

Wir haben also jetzt die Skripte eingebunden und unseren Content angelegt. Als nächstes werden wir jFlow nun beibringen, wo unser Content liegt und wie er geslidet werden soll.

Im Head der Datei machen wir daher folgende Angaben:

<script type='text/javascript'>
$(function() {
	$('div#content-slider').jFlow({
	slides: '#slides',
	width: '425px',
	height: '425px'
	});
});
</script>

Bemerkung:
Wir sagen dem Skript hiermit, dass unser Content im Container mit der ID content-slider liegt, dass die Slides innerhalb des Containers slides (müssen wir noch anlegen) liegen und welche Maße dieser haben soll.

In unserer Beispieldatei legen wir also innerhalb des Containers mit der ID content-slider einen weiteren Container slides um unsere Content-divs. Außerdem lege ich innerhalb von div#content-slider noch einen weiteren mit der ID panel an. Dort kommen unsere Steuerelemente (vor, zurück etc.) hinein.

<div id='content-slider'>

  <div id='panel'>

    <div id='controller'>
      <span class='jFlowControl'>Slide #1</span> |
      <span class='jFlowControl'>Slide #2</span> |
      <span class='jFlowControl'>Slide #3</span>
    </div>
    <div id='prev-next'>
      <img src='img/prev.png' alt='prev' width='16' height='16' class='jFlowPrev'/>
      <img src='img/next.png' alt='next' width='16' height='16' class='jFlowNext'/>
    </div>

  </div><!-- end panel -->

  <div id='slides'>

    <div id='slide1'>
      <img src='img/slide1.jpg' alt='slide1' width='425' height='282'/>
      <h1>Slide1</h1>
      <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
    </div>

    <div id='slide2'>
      <img src='img/slide2.jpg' alt='slide2' width='425' height='282'/>
      <h1>Slide2</h1>
      <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
    </div>

    <div id='slide3'>
      <img src='img/slide3.jpg' alt='slide3' width='425' height='282'/>
      <h1>Slide3</h1>
      <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
    </div>

  </div><!-- end slides -->

</div><!-- end content-slider -->

Bemerkung:
Im Container div#panel haben wir jetzt den controller mit drei Spans, die uns als Links zu den verschiedenen Slides dienen. Achtung! Die Anzahl der Spans muss immer der Anzahl der Sliding-Div (in unserem Beispiel 3) übereinstimmen, sont funktioniert jFlow nicht richtig. Im div prev-next finden wir die Bilder (kann auch Text sein), um vor oder zurück zu sliden. Durch die Klassen jFlowPrev und jFlowNext weiß jFlow, was bei einem Klick darauf zu tun ist.

Ab jetzt funkioniert unser Sliding-Content bereits und wir können uns mit CSS daran austoben. Da dies jeder anders macht und mag, gehe ich auf die Formatierungen nicht im Einzelnen ein.

Download Beispiel › ansehen

Wer mag, kann sich die Beispiele in dem Paket jFlow 1.2 ansehen und anpassen oder sich das Beispiel aus diesem Tutorial herunterladen.

Relevante Links:

• jFlow 1.2 – The Ultra-lightweight Fluid Content Slider for jQuery
• Offizielle Website von jQuery
• Beispiel aus diesem Tutorial