Vorheriger Artikel Nächster Artikel

jQuery Stapel: Cooles Plugin für Online-Galerien oder Portfolio

Mit Stapel können Entwickler coole Online-Galerien oder Portfolio-Übersichten erstellen. Wir zeigen euch, was das kann und wie ihr es benutzt.

jQuery Stapel: Cooles Plugin für Online-Galerien oder Portfolio

Das jQuery-Plugin jQuery Stapel ermöglicht die automatische Gruppierung von Thumbnails. Das Plugin legt die Thumbnails übereinander und stellt diese als Stapel dar. Klickt ein Besucher darauf, wird der Stapel ausgebreitet und die Thumbnails  als übersichtliches Gitter dargestellt.

Das ausgegebene Gitter ist responsive und passt sich der Fensterbreite an. Wird der Viewport verkleinert, ordnen sich die Thumbnails übereinander an. Bei einem größeren Viewport rutschen sie wieder nebeneinander.

jQuery Stapel

Die Animationen beim Ausbreiten des Stapels sind mit CSS-Transforms und Transitions realisiert. Für Browser, die dieses Feature nicht unterstützen, gibt es ein Fallback auf Basis von jQuery Animate.

jQuery Stapel einsetzen

Um den Effekt anwenden zu können, erwartet das Skript eine unsortierte Liste mit der Klasse „tp-grid“.

<ul id="tp-grid" class="tp-grid">
<li data-pile="Group 1">
<a href="#">
<span class="tp-info">
<span>Some title</span>
</span>
<img src="images/1.jpg" />
</a>
</li>
<li data-pile="Group 2">
<!-- ... -->
</li>
<li data-pile="Group 1,Group 2">
<!-- ... -->
</li>
<!-- ... -->
</ul>

Mit dem Data-pile-Attribut lässt sich die Gruppenzugehörigkeit für das jeweilige Element festlegen. Ein einziges Element, kann sogar zu mehreren Gruppen gehören. Der Aufruf des Skripts erfolgt durch den folgenden JavaScript-Code:

$( '#tp-grid' ).stapel();
Für das Skript stehen eine Reihe von Einstellungsmöglichkeiten zur Verfügung. Beispielsweise lässt sich der Abstand zwischen den einzelnen Fotos, die Animations-Geschwindigkeit sowie das Easing für das Ausbreiten und Zusammenlegen des Stapels festlegen. Außerdem können eine Reihe von Callback-Funktionen (onLoad, onBeforeOpen, onAfterOpen, onBeforeClose, onAfterClose) definiert werden.

jQuery Stapel - Kompatibilität

jQuery Stapel funktioniert in allen modernen Browsern, wobei die Performance je nach Browser stark schwanken kann. So liefern Safari, Firefox und Chrome anständige Performance, während Opera deutlich merkbare Ruckler aufweist. Auch auf mobilen Geräten bringt das Plugin eine ordentliche Leistung. Auf kleinen Screens geht der Effekt ein wenig verloren, was das Plugin eher für den Einsatz auf Desktop- und Tablets interessant macht.

Auch wenn die Macher von jQuery Stapel ihr Plugin als „experimentell“ bezeichnen, lässt es sich auch schon zum jetzigen Zeitpunkt gut in Projekten einsetzen. Wer einen Blick auf das Plugin riskieren möchte, kann das auf der Projekteseite von jQuery Stapel tun.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von pixelfreak am 25.01.2013 (11:37 Uhr)

    Schönes Script, danke für den Hinweis! :)

    Antworten Teilen
  2. von Grafiker am 25.01.2013 (11:38 Uhr)

    Danke für den klasse Tipp! Kommt sicher bald bei mir zum Einsatz ;)

    Antworten Teilen
  3. von Alex am 25.01.2013 (13:35 Uhr)

    " So liefern Safari, Firefox und Opera anständige Performance, während Opera deutlich merkbare Ruckler aufweist."
    Das erste Opera sollte wohl Chrome sein, oder?

    Das Plugin sieht aber sehr cool aus!

    Antworten Teilen
  4. von Ilja Zaglov am 25.01.2013 (14:01 Uhr)

    Ja, vielen Dank für die Fehlermeldung!

    Antworten Teilen
  5. von cephei am 27.01.2013 (05:58 Uhr)

    thx. macht schon mehr spass zu lesen, als eine auflistung von plugins.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt
Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt

ContentBuilderJS ist ein jQuery-Plugin, mit dem sich Webseiten aus vorgefertigten Blöcken einfach zusammenklicken lassen. Die Inhalte der jeweiligen Blöcke lassen sich anschließend direkt Inline … » weiterlesen

Von Raptoren und Naughty Cats: Die 6 verrücktesten JavaScript-Snippets
Von Raptoren und Naughty Cats: Die 6 verrücktesten JavaScript-Snippets

Auch Entwickler können Witze machen! Das Schöne dabei: Selbst wenn die Ergebnisse keinen unmittelbaren Nutzen für das aktuelle Projekt entfalten, kann man sich an schön geschriebenen Zeilen … » weiterlesen

Natives JavaScript statt jQuery – So machst du deine Webprojekte schlanker
Natives JavaScript statt jQuery – So machst du deine Webprojekte schlanker

Die JavaScript-Bibliothek jQuery erleichtert uns zweifellos das Leben als Entwickler. Der enorme Funktionsumfang und die vergleichsweise hohe Dateigröße stehen bei manchen Projekten aber nicht im … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen