Beiträge von Sempervivum

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

Was fehlt ist, dass Du das data-Attribut jetzt auch in das figure-Tag verschieben musst:

                  <figure data-filter="food">
                    <a data-fancybox="gallery" href="img/galerie/food/kul3.jpg">
                      <img src="img/galerie/food/kul3_t.jpg"alt="" />
                      <figcaption class="overlay">Tortilla</figcaption>
                  </a>
                  </figure>  

Ich sehe schon einen Fehler:

// falsch:
// if (figure.dataset['data-filter'] == value.toLowerCase() || value == "All Menu") {

if (figure.dataset.filter == value.toLowerCase() || value == "All Menu") {

Das liegt daran, dass das CSS ist und kein Javascript. Du musst es in deiner CSS-Datei eintragen. Und dann das JS so erweitern:

    const liItem = document.querySelectorAll('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['data-filter'] == value.toLowerCase() || value == "All Menu") {
                figure.classList.remove('hidden');
            } else {
                figure.classList.add('hidden');
            }
        });
       }
    });

(ungetestet)

Du hast die Klasse "hidden" nicht beachtet, nur wenn diese gesetzt ist, wird das Bild unsichtbar gemacht:

figure.hidden {
flex-basis: 0;
}Und setzen musst Du sie mit Javascript.

Das liegt daran, dass Du nur das img ausblendest, und nicht das gesamte figure. Bei dem figure wirkt dann das flex-basis: 350px; und es nimmt dennoch den Raum ein wie zuvor, auch wenn das Bild verschwunden ist. Setze das flex-basis für figure auf 0, dann wird es funktionieren.

Noch besser: Setze im Javascript eine Klasse "hidden" und blende dann im CSS das figure aus:

figure.hidden {
    flex-basis: 0;
}

Das war jetzt wirklich ein wenig eine harte Nuss!

Der Schuldige ist das ul in dem Slider "Was sagen meine Kunden".

.testim .dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 60px;
    left: 0;
    display: block;
    z-index: 3333;
    height: 12px;
    padding: 0;
}

Diesem weist Du eine Breite von 100% zu, damit es den umgebenden Container ausfüllt. Das Problem ist, dass dieses ul per Default ein padding hat. Das addiert sich zu der Breite, so dass sich mehr als 100% ergeben und die Breite des Browserfensters überschritten wird. Setze ich im Seiteninspektor das Padding auf 0 verschwindet die horizontale Scrollbar.

Natürlich, das ist zu empfehlen.

Du kannst die Lösung ablesen an deinem Menü:

#menu>ul>li

D. h. Du musst dem Container, der die Buttons umschließt, eine ID geben und diese, wie beim Menü, den Selektoren voran stellen.

Übrigens, dies ist ganz schlecht:

li.className = "active"

Du löschst damit alle anderen Klassen, die das Element schon hat. Besser mit classList arbeiten:

JavaScript/DOM/Element/classList – SELFHTML-Wiki

li.classList.add('active');
// oder
li.classList.remove('active');

Wenn Du den Filter, das wird ja wahrscheinlich eine Leiste mit Buttons werden, einfach im HTML dazwischen setzt, wird die Galerie nach unten rücken, Du brauchst nicht extra Platz zu machen.

Zitat

Vielleicht hast du ja eine Eingebung wie mich von den externen Scripts befreien kann.

Du kannst sie einfach herunter laden, die URL im src-Attribut kopieren, in der Adresszeile des Browsers einfügen. Dann wird die Datei geladen und Du kannst sie mit Rechtsklick, "Speichern unter" lokal speichern.

Ich nehme an, Du hast die Dateien von hier herunter geladen:

GitHub - fancyapps/fancybox: jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. - GitHub - fancyapps/fancybox: jQuery…

github.com

Und im dem Fall passt auch das, was Du auf deiner Seite hast. Warum es nicht funktioniert und wie man es korrigieren kann, habe ich nicht heraus gefunden. Aber anscheinend passt die Doku auf dieser Github-Seite nicht so richtig zu den Dateien, die dort liegen.

PS: Außerdem hast Du ein leeres a-Tag im HTML, statt dessen muss dieses den Inhalte des figure-Tags umschließen:

                  <figure> 
                    <a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg">
                        <img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" />
                        <figcaption class="overlay">Gerdtrud</figcaption>
                    </a>
                  </figure> 

In der Doku wird angegeben, dass man das über CDN einbinden soll, d. h. im Head:

    <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
          />

Und am Ende des Body:

    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
      Fancybox.bind('[data-fancybox]', {
        // Your custom options
      });    
    </script>

Versuche das zunächst so, wenn Du lieber unabhängig vom CDN sein willst, können wir das noch ändern.