Inhaltselemente sortieren mit data-filter
Hallo,
ich würde gerne auf einer Webseite meine Inhaltselemente anhand einer einfachen Liste sortieren lassen.
Bsp.:
Es gibt eine Unterseite Sport. -> Es werden verschiedene Inhaltselemente zu verschiedenen Sportarten angezeigt angezeigt: Tennis, Fußball, Handball, ...
Ich hätte nun gerne, dass man eine kleine Liste hat, bei der man z.B. auf Tennis klickt und dann nur noch Inhaltselemente mit dem Thema Tennis angezeigt werden.
Ich habe im Extension-Repository nichts gefunden, womit man Inhaltselemente sortieren kann, sondern nur Artikel.
Ich bin auf diese Seite gestoßen:
http://isotope.metafizzy.co/docs/filtering.html
Demo: http://isotope.metafizzy.co/demos/filtering.html
Allerdings funktioniert das bei mir leider nicht so Ganz.
Vorgehensweise (bei obigen Link ab Creating interactive buttons):
Sagen wir ich habe drei Inhaltselemente:
1. Zum Thema Tennis
2. Zum Thema Handball
3. Zum Thema Fußball
-> Als erstes lege ich eine Liste an (Modul mit eigenem HTML-Code und dieses wird dann als Inhaltselement auf der Seite eingefügt oder im Seitenlayout...):
Code:
<ul id="filters">
<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".metal">Tennis</a></li>
<li><a href="#" data-filter=".transition">Fußball</a></li>
<li><a href="#" data-filter=".transition">Handball</a></li>
</ul>
Danach füge ich diesen Code im Seitenlayout unter eigener JS-Code ein:
Code:
// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
// options...
});
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
Dann noch das CSS.
So, nun habe ich aber keinem Inhaltselement ein Attribut, wie Tennis, Handball oder Fußball verpasst. -> Somit kann es nicht funktionieren... Vielleicht kann mir hier wer ein bisschen auf die Sprünge helfen!?
Schönes Beispiel: http://www.iconinc.com.au/folio
