Projekt Flexbox Galerie mit Isotopen Auswahl

Emess · 8. November 2023

Dar war anstatt Semicolon Doppelpunkt .

Jetzt ist es im Script

Und was genau soll ich aus dem css nehmen?

Sempervivum · 8. November 2023

Ich sehe schon einen Fehler:

Code

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

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

Emess · 8. November 2023

Dein Post #40 erklärt einiges Jetzt schau ich mal wo ich das in der css unterbringe

Emess · 8. November 2023

Zitat von Sempervivum

Ich sehe schon einen Fehler:

Code

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

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

Den hatte ich schon lokal korrigiert.

Ich versuche jetzt alles umzusetzen dann lade ich neu hoch

Emess · 8. November 2023

So es ist neu hochgeladen

style.css

CSS

 .image-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .image-gallery>figure {
        margin: 0;
        flex-basis:350px;
        /* width: 350px; */
        position: relative;
        cursor: pointer;
    }

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

    .image-gallery figure img {
        object-fit: cover;
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        border-radius: 5px;
    }
    figure.hidden {
        flex-basis: 0;
        }

    .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(57, 57, 57, 0.502);
        top: 0;
        left: 0;
        transform: scale(0);
        transition: all 0.2s 0.1s ease-in-out;
        color: #fff;
        border-radius: 5px;
        /* center overlay text */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* hover */
    .image-gallery figure:hover .overlay {
        transform: scale(1);
    }

Alles anzeigen

filter.css

CSS

/* body,h1,ul,li{
    margin: 0;
    padding: 0;
} */
 body{
    background-color: #667d8e;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
} 
#filter{
    width: 85%;
    margin: 50px auto;
}

#filter>ul{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    border-bottom: 2px solid rgba(2, 2, 2, 0.57);
    padding-bottom: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
#filter>ul>li{
    list-style: none;
    background-color:  rgb(191, 155, 230);
    padding: 5px 10px;
    margin: 0 10px;
    cursor: pointer;
    font-size: 1.2em;
}
#filter>ul>li.active{
    background-color: rgba(41, 255, 41, 0.897);
}
.photo{
    width: 85%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.photo img{
    width: 300px;
    height: 180px;
    margin-bottom: 10px;
}

Alles anzeigen

und das script

JavaScript

 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.filter == value.toLowerCase() || value == "All") {
                figure.classList.remove('hidden');
            } else {
                figure.classList.add('hidden');
            }
        });
       }
    });

Alles anzeigen

noch ist aber der Wurm drin

Sempervivum · 8. November 2023

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

Code

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

Emess · 8. November 2023

Man! Wo nimmst du das alles nur her?

Das hätte ich nie hinbekommen. Super, dass es das Forum gibt.

Vielen Dank!

Sempervivum · 8. November 2023

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:

Code

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

Emess · 8. November 2023

Das ist gut. Es kommen ja noch Bilder später dazu.

Emess · 9. November 2023

Ich hab mir mal den gesamten Code genau angeschaut um auch alles nachvollziehen und verstehen.

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

Was ich gut fände wäre, wenn ich einen Fliter bei der Galerie auswähle die animiert zu ihrem Platz gleiten. so wie hier

Ben Yahia

Ist das überhaupt möglich bzw. wie groß wäre der Aufwand?

Sempervivum · 9. November 2023

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.

Emess · 9. November 2023

Vielleicht wäre das ja für dich eine Herausforderung . Für mich ist es ein nettes Gadget auf das ich warte bist jemand es umgesetzt hat.

Also erstmal unwichtig.

Was mir wirklich aufgefallen ist und mir nicht gefällt ist:

Wenn ich die Seite aufrufe und über den Link Galerie zu dieser wechsel ist erst mal leer erst bim betätigen eines Filters werden die Bilder angezeigt.

Ich habe das

CSS

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

im verdacht.

Da müsst wohl noch was dazu

Sempervivum · 9. November 2023

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.

Emess · 9. November 2023

Also wenn ich das

Code

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

deaktiviere, funktioniert der Filter nicht. Im html-tag >figure> wird diese aber doch mitgegeben

Sempervivum · 9. November 2023

Nein, ich meinte im HTML:

Code

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

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

Code

<figure data-filter="dog">

Emess · 9. November 2023

Bin ich blöd? langsam bekomm ich zweifel

Code

<div class="image-gallery photo">
                    <figure data-filter="dog"> 
                      <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> 
                   <figure data-filter="food">
                    <a data-fancybox="gallery" href="img/galerie/food/kul1.jpg">
                      <img src="img/galerie/food/kul1_t.jpg" alt="" />
                      <figcaption class="overlay">Entenschinken luftgetrocknet</figcaption>
                  </a>
                  </figure>  
                  <figure data-filter="heimat">
                    <a data-fancybox="gallery" href="img/galerie/heimat/heimat1.jpg">
                      <img src="img/galerie/heimat/heimat1_t.jpg" alt="" />
                      <figcaption class="overlay">Heimat</figcaption>
                  </a>
                  </figure>  
                  <figure data-filter="snake">
                    <a data-fancybox="gallery" href="img/galerie/snake/korn1.jpg">
                      <img src="img/galerie/snake/korn1_t.jpg" alt="" />
                      <figcaption class="overlay">Abgestreift</figcaption>
                  </a>
                  </figure>  
                  <figure data-filter="food">
                    <a data-fancybox="gallery" href="img/galerie/food/kul2.jpg">
                      <img src="img/galerie/food/kul2_t.jpg" alt="" />
                      <figcaption class="overlay">Scaloppina Parmigiana</figcaption>
                  </a>
                  </figure>  
                  <figure data-filter="dog">
                    <a data-fancybox="gallery" href="img/galerie/dog/dog2.jpg">
                      <img src="img/galerie/dog/dog2_t.jpg" alt="Gerdtrud" />
                      <figcaption class="overlay">Welpen-Gerdtrud </figcaption>
                  </a>
                  </figure>  
                  <figure data-filter="snake">
                    <a data-fancybox="gallery" href="img/galerie/snake/korn3.jpg">
                      <img src="img/galerie/snake/korn3_t.jpg" alt="" />
                      <figcaption class="overlay">Kornnatter</figcaption>
                  </a>
                  </figure>  
                  <figure data-filter="heimat">
                    <a data-fancybox="gallery" href="img/galerie/heimat/heimat2.jpg">
                      <img src="img/galerie/heimat/heimat2_t.jpg" alt="" />
                      <figcaption class="overlay">Heimat</figcaption>
                  </a>
                  </figure>  
                  <figure data-filter="snake">
                    <a data-fancybox="gallery" href="img/galerie/snake/korn2.jpg">
                      <img src="img/galerie/snake/korn2_t.jpg" alt="" />
                      <figcaption class="overlay">Kornnatter</figcaption>
                  </a>
                  </figure>

Alles anzeigen

ich find da keine class="hidden" . Sorry aber ich vertsteh dich da gerade nicht

Sempervivum · 9. November 2023

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:

Code

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

Emess · 9. November 2023

Ich hab das jetzt so verstanden

Code

  <div class="image-gallery photo">
                    <figure data-filter="dog" class="hidden"> 
                      <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> 
                   <figure data-filter="food" class="hidden">
                    <a data-fancybox="gallery" href="img/galerie/food/kul1.jpg">
                      <img src="img/galerie/food/kul1_t.jpg" alt="" />
                      <figcaption class="overlay">Entenschinken luftgetrocknet</figcaption>
                  </a>
                  </figure>

Alles anzeigen

Das hat bei mir keine Auswirkung. Nach dem Hochladen und klick auf Galerie in der Navigation kommt das

gal1.jpeg

Erst wenn ich auf einen Filter klicke kommen entsprechen Bilder. Aber die Thumbnails sollten ja gleich zu sehen sein.

Sempervivum · 9. November 2023

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.

Emess · 9. November 2023

ok jetzt ist es so

HTML

<div class="image-gallery photo">
                    <figure data-filter="dog"> 
                      <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> 
                   <figure data-filter="food">
                    <a data-fancybox="gallery" href="img/galerie/food/kul1.jpg">
                      <img src="img/galerie/food/kul1_t.jpg" alt="" />
                      <figcaption class="overlay">Entenschinken luftgetrocknet</figcaption>
                  </a>
                  </figure>

Alles anzeigen

was mich etwas irritiert, ist dass h1 Überschrift und ie Filterauswahl erst mittig angezeigt wird und erst bei Filteranwendung alles hochrutscht und man die Bilder sehen kann.

CSS

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

vielleicht ist hier was falsch?

Projekt Flexbox Galerie mit Isotopen Auswahl

Jetzt mitmachen!

Teilen

Tags