Inhaltselemente sortieren mit data-filter

[ElMariachi]

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...):

<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:

// 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

[ElMariachi]

Hier drei Beispiele, die genau so funktionieren, wie im Tutorial beschrieben...

http://irvingandco.com/projects/
http://www.gravitatedesign.com/web-design-portfolio
http://jamestedmondson.com/index.html#lettering

[pief83]

Ich habe so etwas umgesetzt, indem ich beispielweise das ID-Attribut mit dem Data-Attribut im HTML-Template ersetzt habe. Ist eine etwas dreckige Lösung, die zwar funktioniert, aber mich auch nicht ganz glücklich stimmt.

Also, wenn es die Möglichkeit gibt, ein Data-Attribut wie data-key im Backend für einen Artikelteaser oder ein Bildelement ce_image sauber hinzuzufügen, werde ich ganz hellhörig...

[djo]

Hallo zusammen,


bezüglich der Einbindung von "jquery Isotope" bin ich auch sehr interessiert. Hat das jemand bisweilen schon eigebunden? Bei mir haben die Animationen nicht funktioniert.

Es gibt ja die Erweiterung semantic_html5 mit der sich unter Anderem individuelle HTML-Attribute für verschiedene Container-Arten, DIVs etc. - wie sagt man so schön, utilisieren lassen.

Ich werde weiter experimentieren und Ergebnisse posten, falls ich sie erhalte. :-)

Liebe Grüße,
Daniel

[djo]

Jawoll,

funktioniert hervorragend!
Möchte jemand eine genaue Ausführung?

Ich habe jetzt Feierabend. Aber kann es gerne noch mal anleiten.

Ich habe mich aber von dieser Seite hier bedient, da man nur einen JS-File und einen CSS-File zusammengestellt hat:

http://www.9bitstudios.com/2013/04/j...tope-tutorial/



Liebe Grüße,
Daniel

[henningmayer]

Hallo Daniel,
der Beitrag ist zwar nicht mehr ganz neu, aber ich wäre sehr an dem Tutorial interessiert.