Isotope sortieren

[aenni]

Hallo liebe Community,

ich komme leider nicht weiter: ich möchte nämlich in meiner Seite eine Sortierfunktion von isotope einbauen, aber ich weiß nicht direkt, was ich noch machen muss, damit es funktioniert (bin leider in diesem Bereich auch noch ein blutiger Anfänger

).
Bin mir auch nicht sicher, ob ich das hier richtig anzeigen lasse:

das wäre jedenfalls die Funktion, die ja nicht funktioniert

var $container = $('.container').isotope({
  itemSelector: '.kachel',
//layoutMode: 'fitRows',
  getSortData: {
    kurvigkeit: function($kachel){
        return parseInt($kachel.attr('data-category-kurvigkeit'), 10);
  }
  }
});

$('.sort-by-button-group').on( 'click', '.sortierung', function() {
  var sortValue = $(this).attr('data-sort-value');
  $container.isotope({ sortBy: sortValue });
  console.log("passt");
});

und dann der dazugehörige Teil im Body:

<li class="sortieren sort-by-button-group"><img src="bilder/Buttons Interface/button sortieren.png" height="30" width="30"/>   
            <ul class="option-set" data-option-key="sortBy">
                <li class="sortierung" data-sort-value="kurvigkeit"><a href="#" data-isotope-option='{ "sortBy": "kurvigkeit"}'>kurvigkeit</a></li>
                <li class="sortierung" data-sort-value="2">b</li>
                <li class="sortierung" data-sort-value="3">c</li>
                <li class="sortierung" data-sort-value="4">d</li>
                <li class="sortierung" data-sort-value="5">e</li>
            </ul>
        </li>

<main>
<section class="container">


<div class="kachel kurven" data-category-kurvigkeit="1"><img src="bilder/8.1.png" width="200" heigth="200"></div>
<div class="kachel kurven" data-category-kurvigkeit="1"><img src="bilder/8.2.png" width="200" heigth="200"></div>
<div class="kachel kurven" data-category-kurvigkeit="2"><img src="bilder/8.3.png" width="200" heigth="200"></div>
<div class="kachel kurven" data-category-kurvigkeit="1"><img src="bilder/8.4.png" width="200" heigth="200"></div>
<div class="kachel kurven" data-category-kurvigkeit="2"><img src="bilder/8.5.png" width="200" heigth="200"></div>
<div class="kachel kurven" data-category-kurvigkeit="1"><img src="bilder/8.6.png" width="200" heigth="200"></div>
<div class="kachel kurven" data-category-kurvigkeit="2"><img src="bilder/8.7.png" width="200" heigth="200"></div>
<div class="kachel kurven" data-category-kurvigkeit="1"><img src="bilder/8.8.png" width="200" heigth="200"></div>
<div class="kachel kurven" data-category-kurvigkeit="1"><img src="bilder/8.9.png" width="200" heigth="200"></div>

</section>
</main>

Hab mir das jetzt erstmal nur zu dem Punkt "kurvigkeit" aufgebaut, also die Listenpunkte b, c, d, e sind nur Platzhalter.
Ich hoffe, irgendjemand steigt da durch und kann mir etwas weiterhelfen

Liebe Grüße,
aenni

 

[felixprogram]

Das Skript ist mit JQuery programmiert und erfordert die zugehörige API