Projekt Flexbox Galerie mit Isotopen Auswahl

Auf jeden Fall sind jetzt die Bilder gleich nach dem Laden sichtbar, das ist schon Mal sehr gut.

Was ich beobachte ist, dass die Galerie immer vertikal mittig im Container liegt, deshalb verschieben sich Überschrift und Filterleiste je nach Filterung.

#galerie {
    background-color: rgb(56, 52, 59);
    min-height: 100vh;
    padding-bottom: 40px;
    justify-content: flex-start;
}

Zu 1.: Nein, da liegen wir vollkommen auseinander. Bei mir sind sie gleich sichtbar aber Du musst offenbar erst eine Filtertaste drücken.

Lade doch mal mit Strg+F5 neu, dein CSS ist ausgelagert und es könnte ein Problem mit dem Cache sein.

Zu 2.: Das würde bewirken, dass die Taste hervor gehoben wird aber ich erwarte nicht, dass das die Bilder sichtbar macht.

Übrigens: In meinem vorigen Posting habe ich vergessen, das CSS zu kommentieren: Es soll bewirken, dass Überschrift und Filterleiste immer oben am Platz bleiben und nicht vertikal springen wenn man den Filter umschaltet.

Hier verschafft sich Flex Vorrang wegen dieser Anweisung: justify-content: space-between;. Wenn Du das auf center setzt, rücken die Bilder sofort zusammen.

1. Das ist allerdings suboptimal und liegt daran, dass Fancybox alles im Bauch hat nachdem es erst Mal initialisiert ist.

Die Lösung ist aber relativ einfach: In der Callback-Funktion für das Filtern die Fancybox zerstören und neu initialisieren:

        const liItem = document.querySelectorAll('#filter ul li');
            const figureItem = document.querySelectorAll('div.image-gallery figure');

            liItem.forEach(li => {
                li.onclick = function () {
                    //active
                    liItem.forEach(li => {
                        li.classList.remove('active');
                    })
                    li.classList.add("active");

                    //Filter
                    const value = li.textContent;
                    figureItem.forEach(figure => {
                        if (figure.dataset.filter == value.toLowerCase() || value == "All") {
                            figure.classList.remove('hidden');
                        } else {
                            figure.classList.add('hidden');
                        }
                    });
                    Fancybox.destroy();
                    Fancybox.bind('[data-filter="' . filter . '"] a');
                }
            });  

(ganz unten)

2. sehe ich mir jetzt an ...

einen Fehler gemacht, die Variable heißt value, nicht filter:

Fancybox.bind('[data-filter="' . value . '"] a');

2. habe ich mir jetzt angesehen. Das liegt daran, dass es in der Galerie ganz am Ende ein Dummy-Element gibt, das mit :after erzeugt wurde:

    .image-gallery::after {
        content: "";
        flex-basis: 350px;
    }

Ich vermute, Du hast das eingefügt, um die Darstellung für eine bestimmte Anzahl von Spalten und Elementen passend zu machen? Aber in diesem speziellen Fall bringt das die Anordnung durcheinander.

OMG, PHP und Javascript durcheinander gebracht. In Javascript muss man Pluszeichen verwenden, um Strings mit Variablen zu verketten, also so:

Fancybox.bind('[data-filter="' + value + '"] a');

Ich hatte das getestet in der Console aber mit einem festen Selektor und nicht mit einer Variablen.

Nichts ist so einfach, dass es nicht getestet werden muss. Da fehlt noch ein toLowerCase:

Fancybox.bind('[data-filter="' + value.toLowerCase() + '"] a');

Das liegt an diesem CSS:

Zitat

justify-content: space-between;

Wie der Begriff schon sagt, wird der leere Raum zwischen die Elemente gelegt und in diesem Fall ist ziemlich viel leerer Raum: 2 Elemente + gab. Versuch mal center statt dessen.

Versuche es, mir gefällt es mit center am besten, weil dann die großen Zwischenräume in der Mitte nicht auftreten.