Kategorie: jQuery

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();