Projekt Flexbox Galerie mit Isotopen Auswahl

Emess · 7. November 2023

Status

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Stylesheets
    ===================================================================-->
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
#
#
#
#

  <section id="galerie">
            
            <!-- <div class="container"> -->
                <h1 class="heading-text">Galerie</h1>
                <div class="image-gallery">
                  <figure> 
                    <a data-fancybox="gallery" href="img/galerie/dog/dog1.jpg"></a>
                    <img src="img/galerie/dog/dog1_t.jpg" alt="Gerdtrud" />
                        <figcaption class="overlay">Gerdtrud</figcaption>
                   </figure> 
#
#
#
<!--Scripte
    ==================================================================-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.min.js"></script>
    <script type="text/javascript" src="js/totop.js"></script>
</body>
</html>

Alles anzeigen

Also genau wie in der dokumentation.

Aber irgend was fehlt!

Ich lade es mal so hoch

miflo.de

Sempervivum · 7. November 2023

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

Code

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

Und am Ende des Body:

Code

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

Sempervivum · 7. November 2023

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

Code

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

Emess · 7. November 2023

Das mit dem A-Tag hab ich selbst gefunden.

Aber mit dem anderen habe ich stunden gekämpft gelesen und geyoutubed. Ich war echt kurz vorm aufgeben

Was habe ich beim Local einbinden falsch gemacht

Sempervivum · 7. November 2023

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.

Emess · 7. November 2023

Genau da ist es her.

Wie kann ich den zwischen H1 und der Flexbox (Image-Galerie) platz schaffen. Will da noch ein Filter einbauen.

nach diesem Schema

Code

<section>
        <h1>Filter Image</h1>
        <ul>
            <li class="active">All Menu</li>
            <li>Food</li>
            <li>Car</li>
            <li>House</li>
            <li>Travel</li>
        </ul>

        <div class="photo">
            <img src="img/food1.jpeg" data-filter="food">
            <img src="img/food2.jpeg" data-filter="food">
            <img src="img/food3.jpeg" data-filter="food">
            <img src="img/food4.jpeg" data-filter="food">
            <img src="img/mobil1.jpeg" data-filter="car">
            <img src="img/mobil2.jpeg" data-filter="car">
            <img src="img/mobil3.jpeg" data-filter="car">
            <img src="img/mobil4.jpeg" data-filter="car">
            <img src="img/rumah1.jpeg" data-filter="house">
            <img src="img/rumah2.jpeg" data-filter="house">
            <img src="img/rumah3.jpeg" data-filter="house">
            <img src="img/rumah4.jpeg" data-filter="house">
            <img src="img/travel1.jpeg" data-filter="travel">
            <img src="img/travel2.jpeg" data-filter="travel">
            <img src="img/travel3.jpeg" data-filter="travel">
            <img src="img/travel4.jpeg" data-filter="travel">
        </div>
    </section>

    <script>
        const liItem = document.querySelectorAll('ul li');
        const imgItem = document.querySelectorAll('.photo img');

        liItem.forEach(li => {
           li.onclick = function() {
            //active
            liItem.forEach(li => {
                li.className = "";
            })
            li.className = "active";

            //Filter
            const value = li.textContent;
            imgItem.forEach(img => {
                img.style.display = 'none';
                if (img.getAttribute('data-filter') == value.toLowerCase() || value == "All Menu") {
                    img.style.display = 'block';
                }
            })
           }
        });
    </script>

Alles anzeigen

Da hab ich erst mal zu tun. Vielleicht hast du ja eine Eingebung wie mich von den externen Scripts befreien kann.

Sempervivum · 7. November 2023

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.

Sempervivum · 7. November 2023

Übrigens, dies ist ganz schlecht:

Code

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

Code

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

Emess · 7. November 2023

Danke vielmals. Ich probier das Morgen aus

Emess · 7. November 2023

Ich habe es gelesen aber nicht ansatzweise verstanden

Was muss ich an der filter.css verändern dass es keine Konflikte gibt?

CSS

body,h1,ul,li{
    margin: 0;
    padding: 0;
}
body{
    background-color: #667d8e;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
section{
    width: 85%;
    margin: 50px auto;
}
section h1{
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 2em;
}
ul{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.57);
    padding-bottom: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
ul li{
    list-style: none;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 5px 10px;
    margin: 0 10px;
    cursor: pointer;
    font-size: 1.2em;
}
ul li.active{
    background-color: rgba(41, 255, 41, 0.897);
}
.photo{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.photo img{
    width: 200px;
    height: 180px;
    margin-bottom: 10px;
}

Alles anzeigen

Sempervivum · 8. November 2023

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

Code

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

Emess · 8. November 2023

Ganau das hatte ich probiert aber mit "class" klappen tut es aber mit "ID".

Noch eine Frage bezüglich des Scripts

CSS

 <!--Scripte
    ==================================================================-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/fancybox.umd.js"></script>
    <script type="text/javascript" src="js/totop.js"></script>
    <script>
      Fancybox.bind('[data-fancybox]', {
        // Your custom options
      });    
    </script>
   
   <script>
    const liItem = document.querySelectorAll('ul li');
    const imgItem = document.querySelectorAll('.photo img');

    liItem.forEach(li => {
       li.onclick = function() {
        //active
        liItem.forEach(li => {
            li.className = "";
        })
        li.className = "active";

        //Filter
        const value = li.textContent;
        imgItem.forEach(img => {
            img.style.display = 'none';
            if (img.getAttribute('data-filter') == value.toLowerCase() || value == "All Menu") {
                img.style.display = 'block';
            }
        })

Alles anzeigen

Ist es nicht besser das script in eine Datei (fiter.js) zu packen und wie Oben einzubinden?

Sempervivum · 8. November 2023

Natürlich, das ist zu empfehlen.

Emess · 8. November 2023

Also der Filter läuft sehr suboptimal.

Wählt man einen Filter werden zwar nur die gewählten Bilder gezeigt aber leider an der Position wo sie ja sowieso sind.

Bei sehr viel Bildern wäre das Fatal.

Wähle ich anschließen "Alle" sind alle weg und ich muss die Seite neu Laden um sie wieder zu sehen.

Hast du dazu eine Idee

so sieht es aus!

miflo.de

so wäre es wünschenswert

Ben Yahia

Emess · 8. November 2023

Zitat

Wähle ich anschließen "Alle" sind alle weg und ich muss die Seite neu Laden um sie wieder zu sehen.

Das konnte ich zwischenzeitlich beheben

Sempervivum · 8. November 2023

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:

Code

figure.hidden {
    flex-basis: 0;
}

Emess · 8. November 2023

Also wenn du das meinst

Code

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

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

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

Alles anzeigen

dann sind alle Bilder weg. Hoffentlich geh ich euch nicht auf den Zeiger

Sempervivum · 8. November 2023

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.

Emess · 8. November 2023

script1.jpeg

da zeigt er Fehler egal wo ich es hinschreibe

Sempervivum · 8. November 2023

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

Code

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

Alles anzeigen

(ungetestet)

Projekt Flexbox Galerie mit Isotopen Auswahl

Jetzt mitmachen!

Teilen

Tags