Beiträge von Sempervivum

Dass es da schon einen Block gibt, hatte ich gar nicht gesehen. Dann brauchst Du nur das flex-wrap: wrap; in den unteren zu übernehmen und kannst auf den ersten verzichten.

#filter>ul bedeutet, dass das ul ein direktes Kind ist während ein Leerzeichen bedeutet, dass es irgend ein Nachfahre sein kann, also auch Enkel, Urenkel etc.

Das ist hier ganz gut beschrieben:

CSS/Tutorials/Selektoren/Kombinator – SELFHTML-Wiki

Das einfachste dürfte sein, die Buttons mit flex anzuordnen und den Zeilenumbruch frei zu geben:

#filter ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
}

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

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.

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

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

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.

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.

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

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

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

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

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.

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;
}

Jetzt verstehe ich überhaupt nichts mehr: Bei meinem Posting #57 waren nach dem Laden alle Bilder sichtbar und keine Klasse "hidden" im figure. Also alles in Ordnung.

Jetzt ist die Klasse jedoch drin, auch in der Quelltextansicht und folgerichtig keine Bilder sichtbar. In dem folgenden Screenshot habe ich mit dem Seiteninspektor die Klasse gelöscht und sofort wird das eine Bild sichtbar.

pasted-from-clipboard.png

Auf jeden Fall muss diese Klasse heraus aus dem HTML. Wenn Du sie in deinem Editor nicht siehst, müssen wir weiter forschen.

Ich verstehe das jetzt auch nicht: Wenn ich jetzt miflo.de lade, sind die Bilder am Anfang sichtbar und keine Klasse "hidden" am figure.

Dieses:

<figure data-filter="dog" class="hidden">

hatte ich aus miflo.de kopiert, allerdings aus der Inspektor-Ansicht, d. h. diese Klasse kann genau so gut durch JS gesetzt worden sein. Da habe ich wohl ein wenig Verwirrung gestiftet, tut mir Leid.

Da die Bilder jetzt nach dem Laden sichtbar sind, ist aber jetzt alles OK, hoffe ich?

Nein, ich meinte im HTML:

<figure data-filter="dog" class="hidden">

hast Du die Klasse schon zugewiesen. Einfach dort weg lassen, dann werden am Anfang gleich alle Elemente angezeigt.

<figure data-filter="dog">

Du hast im HTML schon die Klasse "hidden" gesetzt, das brauchst Du nicht, sie wird erst beim Filtern durch JS gesetzt für die Elemente, die nicht angezeigt werden sollen.

Man ist ja neugierig und ich wollte wissen, wie man das auch mit PHP machen kann. Dies ist das Ergebnis:

1. Mit String-Manipulation des HTML:

$parent = $_SERVER["SCRIPT_NAME"];
preg_match_all('/href="([^"]+)"/', $html, $matches);
var_dump($parent);
var_dump($matches);
for ($i = 0; $i < count($matches[1]); $i++) {
    $href = $matches[0][$i];
    $url = $matches[1][$i];
    if (strpos($parent, $url) !== false) {
        $htmlModStr = str_replace($href, $href . ' class="active"', $html);
    }
}
var_dump($htmlModStr);
echo $htmlModStr;

2. Mit Parsen durch DOMDocument:

$parent = $_SERVER["SCRIPT_NAME"];
$dom = new DOMDocument;
$dom->loadHTML($html, LIBXML_NOWARNING | LIBXML_NOERROR);
$links = $dom->getElementsByTagName('a');
foreach ($links as $link) {
    $url = $link->getAttribute('href');
    if (strpos($parent, $url) !== false) {
        $link->setAttribute('class', 'active');
    }
}
$htmlModDom = $dom->saveHTML();
var_dump($htmlModDom);
echo $htmlModDom;

Bei beiden wird zunächst das HTML als String in der Variablen $html definiert, z. B.:

$html = '
    <nav>
        <ul>
            <li> <a id="navi01" href="index.php">Startseite</a></li>
            <li> <a id="navi02" href="master-1.php">Seite 1</a></li>
            <li> <a id="navi03" href="master-2.php">Seite 2</a></li>
        </ul>
    </nav>';
$parent = $_SERVER["SCRIPT_NAME"];

Beides erfordert keine Änderungen in der Elterndatei und ist nicht viel komplizierter als die Lösung mit Javascript.

Zitat

Dabei ist mir aufgefallen, dass ich viel weniger und verständlichen html- Code habe als zb. mit Bootstrap.

Das ist genau der Grund, warum ich selbst kein Freund von Bootstrap bin. Freut mich, dass Du das auch so siehst.

Was die Animation mit dem Gleiten zum Platz betrifft, so habe ich das schon bei Isotope gesehen, das Du am Anfang gepostet hattest. So weit ich das überblicke werden dort die Positionen nicht mit Flex oder Grid fest gelegt sondern komplett mit Javascript berechnet.

Auf der einen Seite bin ich nicht so dafür, das Rad neu zu erfinden aber auf der anderen wäre es eine interessante Herausforderung, so etwas wie bei Ben Yahia selbst aufzubauen. Der Effekt, dass die Bilder von unten her eingleiten, wäre noch relativ einfach zu machen: Wie bisher die Positionen durch Flex festlegen lassen, aber direkt nach dem Filtern durch transform:translate die Position nach unten verschieben und dann mit transform: translate(0,0) an den endgültigen Platz gleiten lassen. Die Animation kann man dabei durch CSS machen lassen, man braucht nur die Positionen am Anfang und Ende zu setzen.

Yep, weil diese Aufgabe hin und wieder vorkommt, habe ich etwas in der Schublade. Man kann das mit wenigen Zeilen Javascript erledigen:

        const url = document.location.href;
        document.querySelectorAll('nav li a').forEach(item => {
            if (url.includes(item.href)) {
                item.classList.add('active');
            }
        });

Den Selektor musst Du ggf. anpassen. Und basierend auf der Klasse "active" kannst Du dann den Link hervorheben wie Du es möchtest.

Wenn man versteht, wie es funktioniert, kann man das alles durch logische Überlegung herleiten.

Das Layout ist immer noch ein wenig unsauber. Wenn ich ein display:none hinzu füge, sieht es besser aus. Und auf das flex-basis kann man dann verzichten:

figure.hidden {
    /* flex-basis: 0; */
    display: none;
}