jQuery Slidious

Nehmen wir an, dass Ihr ein paar Stunden totschlagen müsst, während Eure Freundin eine Prüfung ablegt. Was würdet Ihr machen? Wenn "ein jQuery-Plugin entwickeln" das Erste war, was Euch in den Sinn kam, solltet Ihr auf jeden Fall diesen Artikel lesen. Wenn nicht... naja, vielleicht riskiert Ihr trotzdem mal einen Blick.

jQuery Slidious ist ein Plugin, welches eine Liste von Links in eine originelle, ajaxifizierte Webseite mit Slideshow ähnlichen Scroll-Effekten verwandelt. Die Inhalte jedes definierten Links werden vorgeladen und in jeweils ihre eigene Slide gepackt. Die Seiten werde Schachbrettartig angeordnet, bei der die Seitenlängen des Brettes durch die höchste und niedrigste Position definiert werden.

Positionen auf dem Brett werden durch HTML-Attribute zugewiesen. data-x definiert dabei die relative X-Position auf dem Brett. Eine Einheit ist dabei eine Screenbreite. Genauso definiert das data-y Attribut die Y-Position auf dem Brett. Slidious ermittelt die größtmögliche Position und passt die Größe des Containers bzw. des Brettes entsprechend an diese Dimension an.

Die Links können in jeder Art von Container definiert werden. Zum Beispiel so:

<div id="menu">
  <a href="page-1.html" data-x="0" data-y="0">Link 1</a>
  <a href="page-2.html" data-x="2" data-y="3">Link 2</a>
  <a href="page-3.html" data-x="5" data-y="2">Link 3</a>
  <a href="page-4.html" data-x="4" data-y="1">Link 4</a>
</div>

Ihr könnt Slidious starten, indem ihr .slidious() auf den Container anwendet. Dies startet das Plugin. Es wird nun nach der größtmöglichen Position suchen und ein Schachbrett mit allen Slides erstellen. Die Positionen werden dabei wie erwähnt durch die data-Attribute definiert.

  $('#menu').slidious();

In diesem Beispiel würde das Ergebnis so aussehen:

[1][0][0][0][0][0]
[0][0][0][0][4][0]
[0][0][0][0][0][3]
[0][0][2][0][0][0]

0 steht für ein leeres Feld, während 1-4 die entsprechenden Seiten mit der korrespondierenden Nummer aus dem obigen Menü repräsentieren. Slidious hat zahlreiche Konfigurationsoptionen und Callbacks. All diese können angepasst werden, so dass Ihr eine einzigarte Slidious-Erfahrung kreieren könnt.

Für weitere Einzelheiten schaut Euch das Repository auf Github oder die Demo unten an.