\n \n\n \n \n\n \n\n\n```","comment":[{"@type":"Comment","author":{"@type":"Person","name":"Awazon","url":"https://discord.com/users/1144652521021915259","image":"https://cdn.discordapp.com/avatars/1144652521021915259/93e9287be75037d4c570478e08ae7988.webp?size=1024"},"datePublished":"2024-07-18T02:30:18.016Z","text":"<#1090942906296193036>"}],"image":"https://cdn.discordapp.com/attachments/1263304994375995452/1263304994539438231/Screenshot_2024-07-18_031807.png?ex=699ef7b5&is=699da635&hm=91d135a7863cab6d2cd37117540281667fc25acc12b75c008dafb400f1d07256&"}

Dynamic Image Gallery

Archiviert 2 years ago

2 Nachrichten

2 Mitglieder

Erstellt 2 years ago

Aktualisiert 2 years ago

In Discord öffnen

Ghetto Günther

Verified

Hi, I have the following problem. I would like to create a picture gallery in which you can sort by category (name) [picture 1].
It would also be great if there was an easy way to add the images. Since it's not about 10 or 20 but a few hundred, it's very exhausting to do it the way I've done it so far [code snippet].
I have already looked for a method that worked with JSON, but the images overlapped.

Therefore it would be cool if someone knows a method that makes it easy to add the images and also works with the sorting.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./style/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>



    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interna - Gallery</title>
</head>
<body>
    <section class="portfolio">
        <header class="section-head">
            <h1>Die coolsten aus Buchholz</h1>
        </header>


        <main class="container">
            <!-- ****** Buttons Section ****** -->
            <div class="button-group">
                <button class="button active" data-filter="*">ALL</button>
                <button class="button" data-filter=".gruppe">Gruppe</button>
                <button class="button" data-filter=".anna">Anna</button>
                <button class="button" data-filter=".ben">Ben</button>
                <button class="button" data-filter=".danny">Danny</button>
                <button class="button" data-filter=".domenik">Domenik</button>
                <button class="button" data-filter=".hannah">Hannah</button>
                <button class="button" data-filter=".lucas">Lucas</button>
                <button class="button" data-filter=".marlon">Marlon</button>
                <button class="button" data-filter=".michelle">Michelle</button>
                <button class="button" data-filter=".steffen">Steffen</button>
            </div>


            <!-- ****** Gallery Section ****** -->
             <div class="gallery">

              <!-- ANNA -->

                <div class="item anna">
                    <img src="./img/Anna-1.jpg" alt="#">
                  </div>
                  
                  
                  <div class="item anna">
                    <img src="./img/Anna-2.jpg" alt="#">
                  </div>
                  
                  
                  <div class="item anna">
                    <img src="./img/Anna-3.jpg" alt="#">
                  </div>

               <!-- There is much more to come here -->
</div>

    </section>


<!-- ****** Javascript ****** -->

    <!-- jsquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- isotope Filter -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

    <script type="text/javascript">
        var $galleryContainer = $('.gallery').isotope({
            itemSelector: '.item',
            layoutMode: 'fitRows'
        })

        $('.button-group .button').on('click', function() {
            $('.button-group .button').removeClass('active');
            $(this).addClass('active');
            
            var value = $(this).attr('data-filter');
            $galleryContainer.isotope({
                filter: value
            })
        })
    </script>    
</body>
</html>

Dynamic Image Gallery

Antworten (2)