jQuery Plugin – Stapel

jQuery Stapel in Action
jQuery Stapel

Jetzt gibt es ein neues Plugin für Onlinegalerien bzw. Portfolio-Darstellungen: jQuery Stapel

Das Modul gruppiert Thumbnails zu einem Stapel übereinander, die bei Klick wieder nebeneinander als Gatter ausgebreitet werden. Das Stapel-Modul ist flexibel in der Anordnung, passt sich auch der Fensterbreite an (responsive layout).

Als Technik unter der Haube werden CSS-Transforms und Transitions verwendet. Für ältere Browser die das nicht unterstützen wird einfach jQuery Animate verwendet :-)

Uns so wirds verwendet: Eine 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>

Der jQuery-Aufruf erfolgt durch:

$( '#tp-grid' ).stapel();

jQuery Plugin – Accordion

jQuery Accordion Demo jQuery hat sich zum heimlichen JavaScript-Framwork No.1 gemausert, vor allem weil es unzählige Plugins gibt. Hier sollen in loser Folge einige nützliche jQuery-Plugins vorgestellt werden.

jQuery Accordion
Das Accordion Plugin, welches auf dem jQuery UI Paket basiert, verwandelt mehrere Textblöcke in ein Akkordeon, das per Klick die einzelnen Blöcke aufklappt und den aktiven schließt. Einfach praktisch um Textwüsten aufzuräumen und die Zwischenüberschriften als Menü fungieren zu lassen.

Live im Einsatz: Leonhardt Group
Plugin-Site: docs.jquery.com/UI/API/1.8/Accordion