Dynamic Image Gallery
Archived a year ago
G
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.
```html
<!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>
```
