Tutorial: Sliding-Content mit jFlow

Tutorial: Sliding-Content mit jFlow

16. Dezember 2008 in Tutorials, Webdesign, jQuery 15 Kommentare

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

, ,

Simon [webdemar]

Moin, ich bin Simon und betreibe webdemar.com als meine ernstgemeinte Spielwiese für WordPress, Webdesign und so.

RSS abonnieren Twitter

15 Kommentare

  • Straderade
    16. Dezember 2008

    Wish there was an English version of this, I really like the stuff you put out :)

    • webdemar
      16. Dezember 2008

      Actually there is an English version – though not mine ;-) The guys from envato put out a screencast on this topic – Look at this!

  • NuDiva007
    8. Januar 2009

    Coole Sache :) Wieder was intressantes gelernt. :)

  • Rico Neitzel
    28. März 2009

    Schade, Beispiellink endet in 404…

    LG Rico

  • OC
    6. Mai 2009

    Hallo! Gibt es bereits eine Lösung für 2 Slideshows auf einer Seite???

    :) :)

  • chrisi
    15. Mai 2009

    Vielen Dank für den tollen tooltipp, werden wir auf unsere Seite ebenfalls einsetzen…

  • Onken
    1. August 2009

    Hey kann man den slide auch so ändern das er net nach links oder rechts scrollt sondern oben oder unten?

  • Jonas
    27. August 2009

    Danke für das gute Tutorial!
    Leider funktioniert bei mir jflow nicht im IE 6 und im IE 7.
    Das Beispiel hier funktioniert allerdings in den Internet Explorern 6 und 7. Weiß jemand woran das liegen kann?

  • Jonas
    29. August 2009

    Ah, habs selbst rausgefunden… hatte ein Komma zuviel am Ende des Scripts…:

    $(function() {
    $(“div#content-slider”).jFlow({
    slides: “#slides”,
    width: “747px”,
    height: “462px”,
    });
    });

  • Webdesigner
    4. September 2009

    Hiho,
    jflow ist meiner Meinung nach zur Zeit das beste Slider Script, wenn es um Geschwindigkeit und Einfachheit in der Installation geht. Was ich allerdings vermisse ist der Auto-Slider…

  • Mischa
    5. November 2009

    Hello,
    das beste slidescript welches ich bisher gesehen habe…
    das einzige was mir fehlt ist, dass es mir nicht anzeigt wo ich grad bin…
    z.B. ob ich bei slide1 oder 2 bin.
    Hat jemand dafür eine Lösung?

    Beste Grüsse

  • Thomas Wegerer
    11. März 2010

    Gibt es die Möglichkeit beim Laden einer Seite direkt mit zB. Slide 3 anzufangen?

Kommentar schreiben

Dein Name hier
Dein Name hier
12. March 2010

Gravatars sind an. Jetzt kostenlos registrieren!

WordPress Hosting

Für das Hosten von WordPress Blogs empfehlen wir Webspace von Hostloco.
Eine ganze Fotowelt mit nur einer Software - Fotobuch-Software von CEWE.

So am Rande

WordPress 2.8.6 Security Release - 16. November 2009

WordPress versorgt uns von der nächsten großen Version 2.9 noch mit einem weiteren Sicherheits-Release – WordPress 2.8.6. Damit wird eine [...]

WordPress 2.8.5 schließt Sicherheitslücke - 21. Oktober 2009

Seit heute Nacht ist WordPress 2.8.5 zum Download erhältlich. Obwohl schon alle Maschinen für die Version 2.9 laufen, schließt WordPress [...]

WordPress 2.9 kündigt sich an - 14. Oktober 2009

Bald ist es soweit und die erste Beta-Version von WordPress 2.9 wird zum Download erhältlich sein. Das soll laut Peter [...]

Link: Anleitung zur Erstellung von Theme-Options in einem WordPress-Theme - 5. Oktober 2009

Wer ein professionelles WordPress-Theme erstellen möchte, kommt um Theme-Options, einer separaten Seite für Theme-Einstellungen im WordPress-Admin, nicht herum. Theme-Options bieten [...]

Link: Digging into WordPress - 1. Oktober 2009

Sollte es unter Euch einen WordPress-Begeisterten geben, der diese Seite noch nicht kennt, möchte ich ihm diese hiermit vorstellen. Auf [...]

Kostenloser Mozilla Firefox Download des aktuellen Mozilla Firefox Browser.
Offizielles Stadtportal für München. Ein Service für die Landeshauptstadt München.
Do you like this theme?

Powered by WordPress.org - Copyright © 2009. Alle Rechte vorbehalten - Professional WordPress Themes