Letzten Monat habe ich in einem Post bereits ein paar inspirierende Websites vorgestellt, die jQuery verwenden und dabei die B-Note nicht außer Acht lassen. Heute habe ich mir die Galerie jQuery Style vorgenommen. Auch da haben sie einige Perlen aufgeführt.

Use jQuery – Showcase of sites that use jQuery
18 inspirierende Webdesigns mit jQuery

jQuery Style stellt neben einer Galerie zur Inspiration für den Einsatz von jQuery auch jede Menge Informationen um besagtes Thema. So gibt es Tutorials, Screencasts und eine Kategorie, die die nackten jQuery-Plugins vorstellt.

Für Eure und meine Inspiration habe ich die schönsten Seiten in einer Liste zusammengestellt.

jQuery Style

jQuery Style’s Website

Djafar Inal

Djafar Inal’s Website

Merix Studio

Merix Studio’s Website

Noise Freak

Noise Freak’s Website

Transmissions

Transmissions’ Website

Komodo Media – Blog

Komodo Media’s Website

Tao Effect

Tao Effect’s Website

Postbox

Postbox’s Website

Invoice Machine

Invoice Machine’s Website

Krop

Krop’s Website

Doseido

Doseido’s Website

Alberto Beloni

Alberto Beloni’s Website

Matthias Kretschmann

Matthias Kretschmann’s Website

Rareview

Rareview’s Website

Sid05

Sid05′s Website

We Love Icons

We Love Icons’ Website

PHP CLI Framework

PHP CLI Framework’s Website

Tim Van Damme

Tim Van Damme’s Website

Dragon Interactive

Dragon Interactive’s Website

Nerve Music Store

Nerve Music Store’s Website

Auf der Website Use jQuery werden Seiten gelistet, die jQuery in jeglicher Form einsetzen. Für mich dient diese Seite als Inspiration. Man sieht schöne Beispiele wie jQuery in der Praxis umgesetzt wird und natürlich sind die Websites auch sonst sehr ansprechend. Meine Favoriten haben ich hier mal zusammengestellt.

Bei Use jQuery habe ich keine Möglichkeit gefunden, aus der Übersichtsseite direkt auf die jeweilige Seite zuzugreifen. Man muss immer erst in die Einzelansicht, wo man dann den externen Link findet. Klar, das ist gut für Ad-Impressions, ich finde das jedoch etwas nervig. Drum habe ich mir mal eine kleine Liste zusammengestellt, um die Crème de la Crème dieser Seite in einer Übersicht zu haben.

Use jQuery

Use jQuery’s Website

Fabio Carneiro

Fabio Carneiro’s Website ist leider offline

Eddie Yang

Eddie Yang’s Website

Breezy New Media

Breezy New Media’s Website

Sourcebits

Sourcebits’ Website

Deco Design

Deco Design’s Website

Bauersart

Bauersart’s Website

Webdesign Veteran

Webdesign Veteran’s Website

PSD-to-WordPress

PSD-to-WordPress’s Website

Jarques Pretorius

Jarques Pretorius’ Website

Meet Crush + Lovely

Meet Crush + Lovely’s Website

Matthias Schütz

Matthias Schütz’ Website

Lyrical Media

Lyrical Media’s Website

LogoGala

LogoGala’s Website

KISSmetrics

KISSmetrics’ Website

form + function

form + function’s Website

cyberwoven

cyberwoven’s Website

Competition Briquets

Competition Briquets’ Website

Inhalte von WordPress-Seiten werden immer komplexer und damit natürlich ihre Navigation. Eine schicke Sache für ein komplexes Navigationsmenü ist ein Dropdown-Menü. Eine Lösung, die ich gern verwende, ist das Superfish jQuery-Plugin von Joel Birch. Die Implementierung in WordPress ist nicht schwer.

Vor drei Wochen habe ich bereits ein Tutorial geschrieben, welches das Einfügen eines Superfish-Dropdown in eine normale Website erklärt. Wer also noch keine Erfahrung mit dem jQuery-Plugin hat, sollte dort mal einen Blick drauf werfen.

Grundlage für dieses Tutorial
Tutorial: jQuery Dropdown Menü mit Superfish

Einbindung des Superfish-Skriptes

Wie in dem vorherigen Tutorial, müssen wir zunächst das Skript des jQuery-Plugins im Head-Bereich der Website einbinden und aufrufen.

In einem WordPress-Theme bearbeiten wir dafür die Datei header.php. Wir setzen weiterhin voraus, dass sowohl die jQuery-Library (jquery-1.2.6.min.js), das Superfish-Skript (superfish.js) und das Superfish-Stylesheet (superfish.css) im Theme-Ordner im Unterordner /sf/ liegen.

<link rel='stylesheet' type='text/css' media='screen' href='<?php bloginfo('template_url'); ?>/sf/superfish.css' />
<script type='text/javascript' src='<?php bloginfo('template_url'); ?>/sf/superfish.js'></script>

Bemerkung:
Hiermit binden wir also sowohl das Stylesheet des Dropdown also auch das Javascript mit den richtigen Pfaden (/wp-content/themes/dein-theme/sf/) in den Head-Bereich ein.

Somit ist das Plugin für uns nun aufruf- und einsetzbar.

<script type='text/javascript'>
    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });
</script>

Bemerkung:
Mit diesem Aufrunf wird das Superfish-Plugin nun auf alle ungeordneten Listen mit der CSS-Klasse .sf-menu angewendet. Weitere Anpassungen des Plugins entnehmt bitte dem vorherigen Tutorial.

Superfish-Dropdown und wp_list_categories()

Für die Anzeige eines Dropdown-Menüs für Kategorien brauchen wir eine ungeordnete Liste (ul) aller Kategorien. Unterkategorien werden in verschachtelten Listen dargestellt (ul > li > ul etc.). WordPress stellt uns dafür die Funktion wp_list_categories() bereit.

Ein Aufruf könnte also wie folgt aussehen:

<ul id='cat-menu' class='sf-menu'>
    <?php wp_list_categories('title_li='); ?>
</ul>

Dieses Konstrukt würde nun schon ein ansehnliches Dropdown-Menü erzeugen. Um das Ganze zu verfeinern, kann man dem Menü noch einen Link zur Startseite hinzufügen.

<ul id='cat-menu' class='sf-menu'>
    <li class='cat_item<?php if(is_home()) echo ' current-cat'; ?>'><a href='<?php bloginfo('url'); ?>'>Startseite</a></li>
    <?php wp_list_categories('title_li='); ?>
</ul>

Bemerkung:
Wir haben auch hier alle Einflussmöglichkeiten, die uns die Funktion wp_list_categories() bietet.

Superfish-Dropdown und wp_list_pages()

Ein Menü für WordPress-Seiten mit dem Dropdown darzustellen, ist nun relativ einfach. Mit der Funktion wp_list_pages() erhalten wir die erforderliche Listenstruktur für alle Seiten und Unterseiten.

<ul id='page-menu' class='sf-menu'>
    <?php wp_list_pages('title_li='); ?>
</ul>

Bemerkung:
Auch hier können wir natürlich den Startseiten-Menüpunkt einfügen (s.o.) und das Menü mit den Parametern der Funktion wp_list_pages() an unsere Anforderungen anpassen.

Superfish-Dropdown und wp_page_menu()

Mit der Version 2.7 haben uns die WordPress-Entwickler eine neue Funktion zum Aufruf eines Seitenmenüs gegeben – wp_page_menu().

Wie oben erwähnt, ist es für die Darstellung eines Superfish-Menüs nötig, der ungeordneten Liste (ul) des Seitenemenüs die CSS-Klasse .sf-menu zu geben. Die neue Funktion wp_page_menu() bietet uns zwar einige neue Möglichkeiten (z. B. Startseiten-Link einfügen), “verwährt” uns jedoch den direkten Zugriff auf den ul-Tag der Liste.

Der Aufruf sieht bspw. wie folgt aus:

<?php wp_page_menu('show_home=1&include=1,2,4,7&menu_class=page-navi&title_li='); ?>

Bemerkung:
Wir können u.a. eine CSS-Klasse vergeben (menu_class). Jedoch wird diese Klasse auf den um die Liste (ul) erzeugten div-Container angewendet.

Der Output der Funktion würde etwa wie folgt aussehen:

<div class='page-navi'>
	<ul>
		<li class='current_page_item'><a href='#'>Home</a></li>
		<li class='page_item page-item-1'><a href='#' title='Seite1'>Seite1</a></li>
		<li class='page_item page-item-2'><a href='#' title='Seite2'>Seite2</a></li>
		<li class='page_item page-item-3'><a href='#' title='Seite4'>Seite4</a></li>
		<li class='page_item page-item-3'><a href='#' title='Seite7'>Seite7</a></li>
	</ul>
</div>

Bemerkung:
Nun haben wir zwar eine Liste innerhalb eines div-Containers und für CSS-Formatierungen ist diese Verschachtelung natürlich kein Problem. Für unser Dropdown brauchen wir aber auf jeden Fall die Klasse .sf-menu auf dem ul-Tag.

Der Liste in wp_page_menu() eine Klasse zuteilen

Mit einer kleinen Erweiterung in der functions.php unseres WordPress-Themes können wir die Funktion wp_page_menu() durch einen WordPress-Filter schicken. Mit der PHP-Funktion preg_replace suchen wir uns den ersten(!) ul-Tag im Output unseres Seitenmenüs und erweitern diesen um eine ID und eine Klasse. Ian Steward von ThemeShaper hat diese Lösung vorgestellt.

// Add ID and CLASS attributes to the first <ul> occurence in wp_page_menu
function add_menuclass($ulclass) {
return preg_replace('/<ul>/', '<ul id='nav' class='something-classy'>', $ulclass, 1);
}
add_filter('wp_page_menu','add_menuclass');

Bemerkung:
Mit diesem kleinen Code-Schnipsel in der functions.php ist es nun ohne Probleme möglich, auch in der neuen wp_page_menu-Funktion unsere Klasse .sf-menu an die ungeordnete Liste (ul) weiterzugeben.

Fazit

Wir sehen also, es ist nicht weiter schwierig, ein Superfish-Dropdown-Menü in einer WordPress-Navigation zu nutzen, da wir lediglich eine Klasse vergeben müssen. Was etwas mehr Arbeit bereitet, ist die Anpassung des Stylesheets an das Layout der Seite. Aber auch das ist mit Geduld und Spucke ohne Weiteres zu schaffen

Relevante Links

• Superfish – Suckerfish on ‘roids
• Tutorial: jQuery Dropdown Menü mit Superfish
• Funktion wp_page_menu()
• Adding Class To The WordPress Page Menu
• PHP-Funktion preg_replace()
• Superfish jQuery Menu IE z-index Bug (English)

Ein sowohl einfaches wie komplexes jQuery-Plugin für ansprechende Tooltips ist das Skript Simpletip von Craig Thompson. Es bietet zahlreiche Möglichkeiten die Anzeige der Tooltips (Hover, Klick, Position, Fade, Slide u.v.m.) anzupsassen. (via WebResourcesDepot)

Das für mich beste Skript, um dynamische Dropdown-Menüs zu erzeugen, ist das jQuery-Plugin von Joel Birch. Durch zahlreiche Parameter können wir uns das Multi-Level-Menü mit Leichtigkeit in Aussehen und Funktion unseren Anforderungen anpassen. Die Einbindung ist keineswegs schwer.

Auch auf diesem Blog habe ich das Superfish Dropdown-Menü von Joel Birch erfolgreich im Einsatz. Das Menü ist beliebig erweiterbar, es können also unendlich viele Unterebenen dargestellt werden.

IE Problems?
Superfish jQuery Menu IE z-index Bug (English)

Einbindung von Superfish in eine Website:

• Herunterladen des Skriptes – Superfish
• Einbinden des Stylesheets und des Javascript-Aufrufes in den Head-Bereich der Website
• Aufrufen der Superfish-Funktion im Head-Bereich der Website

<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' />
<script type='text/javascript' src='superfish.js'></script>

Bemerkung:
Im Head-Bereich unserer Website binden wir das Stylesheet ein und rufen das Superfish-Javascript auf. Bitte beachten! Der Pfad muss möglicherweise angepasst werden. In obigem Beispiel gehen wir davon aus, dass das Website-Dokument, das Stylesheet und das Javascript auf einer Ordnerebene liegen.

<script type='text/javascript'>
    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });
</script>

Bemerkung:
Ebenso im Head-Bereich unseres Dokuments rufen wir nun die Superfish-Funktion mittels Javascript auf. Hierbei wird gesagt, dass das Superfish-Menü auf eine ungeordnete Liste ul mit der Klasse .sf-menu angewendet werden soll.

Anpassen der Menü-Parameter:

Wie schon angesprochen, lässt uns Joel Birch bei dem Aufruf der Superfish-Funktion zahlreiche Optionen die Funktionsweise des Dropdown-Menüs zu beeinflussen.

Folgende Parameter stehen uns zur Verfügung:

$.fn.superfish.defaults = {
    hoverClass:    'sfHover',          // the class applied to hovered list items
    pathClass:     'overideThisToUse', // the class you have applied to list items that lead to the current page
    pathLevels:    1,                  // the number of levels of submenus that remain open or are restored using pathClass
    delay:         800,                // the delay in milliseconds that the mouse can remain outside a submenu without it closing
    animation:     {opacity:'show'},   // an object equivalent to first parameter of jQuery’s .animate() method
    speed:         'normal',           // speed of the animation. Equivalent to second parameter of jQuery’s .animate() method
    autoArrows:    true,               // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance
    dropShadows:   true,               // completely disable drop shadows by setting this to false
    disableHI:     false,              // set to true to disable hoverIntent detection
    onInit:        function(){},       // callback function fires once Superfish is initialised – 'this' is the containing ul
    onBeforeShow:  function(){},       // callback function fires just before reveal animation begins – 'this' is the ul about to open
    onShow:        function(){},       // callback function fires once reveal animation completed – 'this' is the opened ul
    onHide:        function(){}        // callback function fires after a sub-menu has closed – 'this' is the ul that just closed
};

Der Aufruf der Superfish-Funktion im Head-Bereich lässt sich nun beispielsweise wie folgt erweitern:

<script type='text/javascript'> 

    $(document).ready(function() {
        $('ul.sf-menu').superfish({
            delay:       1000,                            // one second delay on mouseout
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
            speed:       'fast',                          // faster animation speed
            autoArrows:  false,                           // disable generation of arrow mark-up
            dropShadows: false                            // disable drop shadows
        });
    }); 

</script>

Bemerkung:
Mit diesen Parametern bestimmen wir also, dass das Dropdown eine Sekunde nach Mouseout ausgeblendet, eine leichte Einblendung über Transparenz und ein Slide-Down-Effekt mit schneller Geschwindigkeit haben soll. Außerdem werden keine Pfeile (wenn Unterpunkte vorhanden) angezeigt und kein Menüschatten erzeugt. Ihr seht bereits, was alles mit diesem Skript möglich ist.

Verschiedene Arten des Superfish-Menüs:

Neben den Optionen für Animationen und Geschwindigkeiten gibt es verschiedene Arten des Dropdown-Menüs.

1. Basic Style – horizontales Menü mit Dropdowns:

horizontale Menüleiste mit Dropdowns

Wie der Name schon sagt, ist der Basic Style die einfachste Form des Superfish-Menüs.

2. Vertical Style – vertikales Menü mit Dropdowns zur Seite:

vertikales Menü mit Dropdowns zur Seite

Um ein vertikales Menü anzuzeigen, brauchen wir lediglich ein zusätzliches Stylesheet einbinden und der ungeordneten Liste ul unseres Menüs mit der Klassen .sf-menu eine weitere Klasse .sf-vertical hinzufügen:

<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' />
<link rel='stylesheet' type='text/css' media='screen' href='superfish-vertical.css' />

<ul id='menu' class='sf-menu sf-vertical'>
    <li><a href='#'>Menu Item</a>
        <ul>
            <li><a href='#'>Submenu Item</a></li>
            <li><a href='#'>Submenu Item</a></li>
            <li><a href='#'>Submenu Item</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu Item</a></li>
    <li><a href='#'>Menu Item</a></li>
</ul>

3. Nav-bar Style – doppelte Menüleiste mit Dropdowns:

doppelte Menüleiste mit Dropdowns

Der Nav-bar Style ist ebenfalls sehr interessant. Er bietet eine doppelte Menüleiste, bei der ab der dritten Ebene Dropdowns angezeigt werden. Ebenfalls wird der Pfad zur aktuellen Seite im Menü wiedergegeben.

Auch hier muss nur das entsprechende zusätzliche Stylesheet eingebunden werden und die weitere Klasse .sf-navbar an die Liste weitergegeben werden.

<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' />
<link rel='stylesheet' type='text/css' media='screen' href='superfish-navbar.css' />

<ul id='menu' class='sf-menu sf-navbar'>
    <li><a href='#'>Menu Item</a>
        <ul>
            <li><a href='#'>Submenu Item</a></li>
            <li><a href='#'>Submenu Item</a></li>

            <li><a href='#'>Submenu Item</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu Item</a></li>
    <li><a href='#'>Menu Item</a></li>
</ul>

4. with Supersubs – Dropdown-Menü mit extralangen Unterpunkten:

Dropdown-Menü mit extralangen Unterpunkten

Die Option Supersubs bietet die Möglichkeit dynamisch auf besonders lange Unterpunkte zu reagieren, um Zeilenumbrüche im Menü zu vermeiden.

Um Supersubs einzubinden, müssen wir ein zusätzliches Javascript integrieren und den Aufruf der Superfish-Funktion etwas erweitern.

<script type='text/javascript' src='superfish.js'></script>
<script type='text/javascript' src='supersubs.js'></script>

<script type='text/javascript'> 

    $(document).ready(function(){
        $('ul.sf-menu').supersubs({
            minWidth:    12,   // minimum width of sub-menus in em units
            maxWidth:    27,   // maximum width of sub-menus in em units
            extraWidth:  1     // extra width can ensure lines don't sometimes turn over
                               // due to slight rounding differences and font-family
        }).superfish();  // call supersubs first, then superfish, so that subs are
                         // not display:none when measuring. Call before initialising
                         // containing tabs for same reason.
    }); 

</script>

Formatierung mit CSS:

Blau ist hübsch, aber nicht jedermanns Sache und nicht immer zum Rest der Website passend. Die Anpassung des Aussehens über CSS ist übersichtlich gestaltet und kann in folgenden Dateien vorgenommen werden:

• superfish.css
• superfish-vertical.css (bei Vertical Stlye)
• superfish-navbar.css (bei Nav-bar Stlye)

Support:

Sollte man Probleme mit der Einbindung und Anwendung von Superfish haben, kann man sich in die jQuery Mailing List eintragen und sein Anliegen dort kundtun.

Sowie Joel etwas Zeit hat, hilft er persönlich weiter, ansonsten tummeln sich dort auch sonstige schlaue jQuery-Köpfe.

Ich selbst hatte letzte Woche ein Problem mit der Einbindung von Superfish in WordPress. Innerhalb eines Tages war das Problem nach einigem Hin- und Her-Gemaile (tolles Wort!) gelöst.

A big big thanks to Joel for awesome support!

Fazit:

Das Superfish jQuery-Dropdown-Menü bringt eine unheimliche Vielfalt an Features mit sich. Wenn man sich auch nur ein wenig mit Einbindung von Skripten und XHTML/CSS auskennt, ist die Anwenung dieses Plugins überhaupt kein Problem und bietet einen beachtlichen Mehrwert für eine Website, ein Template oder WordPress-Theme.

Relevante Links:

• Superfish – Suckerfish on ‘roids
• Download – Superfish
• Support in der jQuery Mailing List
• Superfish jQuery Menu IE z-index Bug (English)
• Tutorial: jQuery Dropdown Menü für WordPress

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