Anzeige
Tutorialbeschreibung

jQuery - scrollbare Bereiche

jQuery - scrollbare Bereiche

Scrollbare Bereiche sind Ihnen sicherlich schon auf unzähligen Webseiten begegnet. Und in der Tat verwundert deren zunehmende Beliebtheit nicht im Geringsten. Schließlich lassen sich Inhalte dank dieser Technik äußerst platzsparend auf der Webseite unterbringen. Um scrollbare Bereiche umzusetzen, gibt es verschiedene Möglichkeiten. Eine der effektivsten ist dabei zweifellos der Einsatz der jQuery-Tools. Und genau darum geht es in diesem Tutorial.


Bevor gezeigt wird, wie sich scrollbare Bereiche definieren lassen, zunächst ein Blick darauf, was es damit eigentlich auf sich hat. Angenommen, Sie möchten Ihren Besuchern möglichst platzsparend 15 Grafiken präsentieren. Setzt man hier auf einen scrollbaren Bereich, würde das folgendermaßen aussehen:
[Beispiel anzeigen]

Bilder



 
Ruft ein Benutzer die Seite auf, werden ihm zunächst fünf Grafiken angezeigt. Über die entsprechenden Links können dann aber auch die anderen Grafiken eingeblendet werden.

Bilder



Eine solche Anwendung lässt sich mit den jQuery-Tools – die in einigen Tutorials auf PSD-Tutorials.de bereits vorgestellt wurden – vergleichsweise einfach umsetzen. Laden Sie sich dafür die Scrollable-UI-Tools von der Seite http://flowplayer.org/tools/download/index.html herunter.
 

Die Navigation festlegen

Im einfachsten Fall legen Sie eine Vor-Zurück-Navigation an. Dazu definieren Sie zunächst den Bereich, in dem die Elemente (also beispielsweise die Grafiken) angezeigt werden sollen.
<div class="scrollable">  
 <div class="items"> 
 …
 </div>
</div>

Zusätzlich wird eine Navigation benötigt. Die kann aus Textlinks bestehen.
<a class="prev" href="#">links</a> 

<a class="next" href="#">rechts</a>

Ebenso können Sie aber natürlich auch Grafiken einsetzen. Entscheidend sind die beiden Klassen prev und next. Mit prev lassen sich die vorherigen Elemente aufrufen, während mit next auf die kommenden Elemente zugegriffen wird.

Die eigentliche Syntax der jQuery Tools sieht – wenn man keine weiteren Optionen angibt – folgendermaßen aus:
$(".scrollable").scrollable();

Mehr ist normalerweise nicht nötig. Allerdings können Sie zusätzliche Parameter angeben, um das Scrollen zu optimieren. Dazu aber später mehr. Zunächst geht es um die praktische Umsetzung des zuvor Beschriebenen. Definieren Sie die Grafiken, die angezeigt werden sollen.

 
 
Im folgenden Beispiel wird davon ausgegangen, dass jeweils fünf Bilder auf einmal angezeigt werden sollen.
 
[Beispiel anzeigen]
Bilder



 
Um so etwas umzusetzen, werden für alle Bilder-Gruppen eigene div-Bereiche angelegt. Das könnte folgendermaßen aussehen:
<div class="scrollable">   
    <div class="items"> 
       <div> 
          <img src="bild1.jpg" /> 
          <img src="bild2.jpg" /> 
          <img src="bild3.jpg" /> 
          <img src="bild4.jpg" /> 
          <img src="bild5.jpg" /> 
       </div> 
       <div> 
          <img src="bild6.jpg" /> 
          <img src="bild7.jpg" /> 
          <img src="bild8.jpg" /> 
          <img src="bild9.jpg" /> 
          <img src="bild10.jpg" /> 
       </div> 
       <div> 
          <img src="bild11.jpg" /> 
          <img src="bild12.jpg" /> 
          <img src="bild13.jpg" /> 
          <img src="bild14.jpg" /> 
          <img src="bild15.jpg" /> 
       </div>   
    </div>    
 </div>

Für die Navigation wird im aktuellen Beispiel auf einfache Textlinks zurückgegriffen. Entscheidend an denen sind die zugewiesenen CSS-Klassen prev und next. Diese Klassen müssen Sie auch dann verwenden, wenn Sie anstelle der Textlinks Bilder für die Navigation einsetzen.
<a class="prev" href="#">links</a>
 <a class="next" href="#">rechts</a>


 
Das Scrollen muss übrigens nicht zwangsläufig über Hyperlinks oder Grafiken erfolgen. Ebenso kann auch die Tastatur benutzt werden. Denn in der Tat kann man auch die Pfeiltasten der Tastatur verwenden. Probieren Sie das ruhig einmal aus. Für die Gestaltung wird wie üblich auf CSS zurückgegriffen. Im einfachsten Fall könnte das folgendermaßen aussehen:
<style type="text/css">
 /* <![CDATA[  */
 .scrollable {
    position:relative;
    overflow:hidden;
    width: 680px;
    height:120px;
    border:1px solid #ccc;
 }
 .scrollable .items {
    width:20000em;
    position:absolute;
    clear:both;
 }
 .items div {
    float:left;
    width:680px;
 }
 .scrollable img {
    float:left;
    margin:20px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;
 }
 .scrollable {
    float:left;        
 }
 a.disabled {
    visibility:hidden !important;              
 }          
   /* ]]> */
 </style>

In der Gestaltung sind Sie letztendlich natürlich völlig frei. Entscheidend ist lediglich, dass der eigentliche Bereich so definiert wird, dass die gewünschte Grafikanzahl angezeigt wird.

 
Was jetzt noch fehlt, ist das eigentliche Skript.
<script  type="text/javascript">
 /* <![CDATA[  */
    $(document).ready(function() { 
 $(".scrollable").scrollable();
 });
   /* ]]> */
 </script>

Das ist die einfachste Syntaxform. Allerdings gibt es noch zahlreiche Eigenschaften, durch die sich die entsprechenden Scroll-Anwendungen konfigurieren lassen. Die Konfigurationsoptionen werden folgendermaßen verwendet:
<script  type="text/javascript">
 /* <![CDATA[  */
    $(document).ready(function() { 
 $(".scrollable").scrollable({speed: 700, circular: true});
 });
   /* ]]> */
 </script>

Beachten Sie, dass die einzelnen Optionen jeweils durch Kommata voneinander getrennt notiert werden müssen. Im aktuellen Beispiel wurden die Optionen speed und circular verwendet.  Über speed bestimmt man die Animationszeit in Millisekunden. circular legt hingegen die Art des Scrollens fest. Durch circular: true wird eine "Endlosschleife" erreicht. Die Navigation ist also immer in beide Richtungen möglich, auch wenn eigentlich bereits das Ende der Bildfolge erreicht ist. Eine weitere interessante Option ist keyboard. Wie bereits beschrieben, lässt sich das Scrollen standardmäßig auch über die Pfeiltasten der Tastatur realisieren. Wer das nicht wünscht, setzt den Wert von keyboard auf false.
<script  type="text/javascript">
 /* <![CDATA[  */
    $(document).ready(function() { 
 $(".scrollable").scrollable({speed: 700, circular: true, keyboard: false});
 });
   /* ]]> */
 </script>

Dank dieser Einstellung können die Besucher das Scrollen ab sofort nicht mehr über die Pfeiltasten steuern.

 
Standardmäßig ermittelt das Skript selbst, ob das Scrollen vertikal oder horizontal erfolgen soll. Ist die Höhe größer als die Breite, dann wird automatisch vertikal gescrollt. Durch die Option vertical können Sie aber auch explizit festlegen, dass das Scrollen in jedem Fall vertikal erfolgen soll. Dazu weist man vertical den Wert true zu.
<script  type="text/javascript">
 /* <![CDATA[  */
    $(document).ready(function() { 
 $(".scrollable").scrollable({vertical: true});
 });
   /* ]]> */
 </script>

Wem die Art des Scrollens nicht gefällt, der kann übrigens auch eigene Scrolleffekte definieren. Dafür muss allerdings zusätzlich das Plug-in jQuery Easing eingesetzt werden, das Sie von der Seite http://gsgd.co.uk/sandbox/jquery/easing/ herunterladen können. Ein Beispiel, wie sich personalisierte Animationen auf Basis dieses Plug-ins umsetzen lassen, finden Sie unter http://flowplayer.org/tools/demos/scrollable/easing.html.
 

Mehrere Scrollbereiche auf einer Seite

In den bisherigen Beispielen wurde jeweils nur ein Scrollbereich verwendet. Was aber, wenn auf einer Seite gleich mehrere dieser Bereiche enthalten sind? Dann stellt sich die Frage, wie die Navigationselemente "wissen" können, welchen Bereich sie steuern sollen. An der eigentlichen Funktionalität ändert sich nichts. Diese wird wie üblich folgendermaßen umgesetzt:
$(".scrollable").scrollable();
Entscheidend ist vielmehr, wie die Scrollbereiche in die Seite integriert werden. Damit sich diese nämlich nicht gegenseitig "in die Quere kommen", umschließt man sie jeweils mit einem eigenen div-Element.
 
Möchte man also beispielsweise zwei Scrollbereiche auf einer Seite haben, könnte das folgendermaßen aussehen:
<div>
   <a class="next"/>
   <div class="scrollable">
     ...
   </div>
   <a class="prev"/>
</div>
 <div>
   <a class="next"/>
   <div class="scrollable">
     ...
   </div>
 <a class="prev"/>
</div>

Auf diese Weise könnten Sie dann auch noch beliebig viele weitere Bereiche einfügen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Peekmann
  • 20.12.2010 - 12:26

super sache, sehr detailliert. arbeite mich grade so rein in das thema, und bin immer dankbar für beispielhafte posts. thx

Portrait von Janine17
  • 30.06.2010 - 16:11

Auch ein super Tut, aber das such ich auch nicht:-)

Portrait von riedmanna
  • 11.06.2010 - 07:04

Das ist mal was nützliches. Kann ich sicher gut gebrauchen

Portrait von maajofri
  • 09.06.2010 - 20:02

Sorry, falsche bewertung angeklickt:

Portrait von maajofri
  • 09.06.2010 - 20:01

Ganz cool! Ich werde es mal ausprobieren!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.06.2010 - 18:17

Sehr schön :) Das werde ich demnächst mal ausprobieren, Danke!

Portrait von tomtom81
  • 08.06.2010 - 00:34

Sowas hab ich gesucht, danke!!

Portrait von ZIMDeadAngel
  • 07.06.2010 - 20:55

Sehr gutes Tut :).
Ich war bereits auf der Suche wie ich sowas mit jQuery realisieren kann :)!
Danke :D

Portrait von injektion
  • 07.06.2010 - 16:18

Nettes Tutorial.
Hätte ich vor einer Weile gut gebrauchen können. :D

Das Einzige, was ich hier vermisse ist, dass User mit deaktiviertem JavaScript keine Möglichkeit haben, durch die Bilder zu scrollen!
Wäre chic, wenns dafür nen Tutorial geben würde.. denn vielleicht gibts ja noch eine andere Möglichkeit außer mit "noscript" zu arbeiten.

x
×
×