Filter per Link..

  • Hi


    Bin gerade mit einer Galerie beschäftigt, welche ich nun mit einem Filter ausstatten möchte.

    Also z.B. 4 Links auf die man klicken kann, und nach dem Klick werden nur noch Bilder angezeigt welche eine Referenz oder ähnliches (was es benötigt) auf diesen Link haben.

    Ich arbeite mit Bootstrap 4 und wäre um jede Hilfe dankbar! :)


    Hier meine Galerie:

  • Hey,


    du kannst z.b. den Bildern einer Gruppe die selbe Value geben. Nun beim klick auf den Link wird diese value an das php-script gesendet via XMLHttpRequest und PHP sucht nach den dazugehörigen Bildern und gibt diese dann aus. Mit Checkboxen würde es meiner Meinung besser aussehen.


    Gruß,

    Stef

  • Hi Stef,


    Vielen Dank für deinen Tipp.


    Würde es jedoch gerne mit JS umsetzten da ich die Seite nicht neu laden möchte sondern beim Start sollen alle Bilder angezeigt werden und beim Klick auf eine "Kategorie" sollen alle Bilder die nicht zu dieser Kategorie gehören ausgeblendet werden.

    Verstehst du ungefähr wie ich es meine?


    Danke und Gruss

    hunny design

  • Habe nun einige Dinge im Internet gefunden..

    Leider funktioniert es nicht wie gewollt..


    Hier mal mein Code..





    Kann mir hier echt ein JS-Profi weiterhelfen?

  • Hey,


    die Seite wird doch dabei nicht neu geladen. Siehe auch https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest


    Ich habe es so gemeint:


    showPic.html:

    showPicture.php:


  • Vielen Dank für deine Hilfe.


    Hast du meinen Beitrag sehen?

    Was haltest du von diesem Ansatz?

    Kannst du mir dabei helfen dies zu voll enden?


    Bin Dankbar um jede Hilfe :)

  • Hey,


    habe einfach mal den ganzen Code kopiert. Es funktioniert.


    Du siehst doch, das in der class des div-blocks der Bildtyp steht. Ebenso steht in den Auswahlkriterien diese Bildtypen als data-filter. Dann fragt der nach dem Klick auf eine der Buttons den Wert vom Attribut data-filter ab. Nun hat er in dieser Variable den Wert, also den Bildtyp welcher angezeigt werden soll. Wenn nun value gleich all ist sollen alle Bilder ausgegeben werden, daher wird auch nichts aus der Auswahl entfernt. Nur wenn die value nicht gleich all ist dann entfernt er die Elemente die übereinstimmen und zeigt dann die Bilder an, die mit der Auswahl übereinstimmen.


    Siehe auch: http://api.jquery.com/not/ und http://api.jquery.com/filter/


  • Ach wie dumm von mir...

    Hab jquery erst im Footer eingebunden gehabt.

    Danke jedenfalls für deine Hilfe! :)

  • So einen Fehler kann jedem mal passieren. Alles gut.


    Nur würde ich nicht einfach alles kopieren. Man soll es ja als Junior Webentwickler auch selbst hinbekommen. Klar recherchiert mann, aber einfach kopieren ist dann nicht gut. Naja ist aber deine Sache.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!