<style>
.gallery-container {
max-width: 1100px;
margin: auto;
text-align: center;
}

.filter-btns {
margin-bottom: 20px;
}

.filter-btns button {
padding: 10px 18px;
margin: 5px;
border: none;
cursor: pointer;
background: #eee;
border-radius: 4px;
font-size: 14px;
transition: 0.3s;
}

.filter-btns button.active,
.filter-btns button:hover {
background: #333;
color: #fff;
}

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

.gallery-item {
width: 30%;
display: block;
cursor: pointer;
}

.gallery-item img {
width: 100%;
border-radius: 6px;
transition: 0.3s;
}

.gallery-item img:hover {
transform: scale(1.03);
}

/* LIGHTBOX */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}

.lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 8px;
}
</style>

<div class=”gallery-container”>

<!– Filtry –>
<div class=”filter-btns”>
<button class=”active” data-filter=”all”>Wszystkie</button>
<button data-filter=”natura”>Bilbordy</button>
<button data-filter=”miasto”>Reklama</button>
<button data-filter=”ludzie”>Ludzie</button>
</div>

<!– Galeria –>
<div class=”gallery”>
<div class=”gallery-item Reklama”>
<img src=”https://greemi.pl/wp-content/uploads/2025/11/WRGYM_reklama_swietlna.jpg” data-large=”https://greemi.pl/wp-content/uploads/2025/11/WRGYM_reklama_swietlna.jpg”>
</div>
<div class=”gallery-item Reklama”>
<img src=”https://greemi.pl/wp-content/uploads/2025/11/wisniowski_reklama_swietlna.jpg” data-large=”https://greemi.pl/wp-content/uploads/2025/11/wisniowski_reklama_swietlna.jpg”>
</div>
<div class=”gallery-item Reklama”>
<img src=”https://greemi.pl/wp-content/uploads/2025/11/Spoldzielczy_reklama_swietlna_01-scaled.jpg” data-large=”https://greemi.pl/wp-content/uploads/2025/11/Spoldzielczy_reklama_swietlna_01-scaled.jpg”>
</div>
<div class=”gallery-item ludzie”>
<img src=”https://greemi.pl/wp-content/uploads/2025/11/Spoldzielczy_reklama_swietlna.jpg” data-large=”https://greemi.pl/wp-content/uploads/2025/11/Spoldzielczy_reklama_swietlna.jpg”>
</div>
<div class=”gallery-item miasto”>
<img src=”URL_5″ data-large=”URL_5″>
</div>
<div class=”gallery-item ludzie”>
<img src=”URL_6″ data-large=”URL_6″>
</div>
</div>
</div>

<!– LIGHTBOX –>
<div class=”lightbox” id=”lightbox”>
<img id=”lightbox-img” src=””>
</div>

<script>
// FILTROWANIE
document.querySelectorAll(„.filter-btns button”).forEach(button => {
button.addEventListener(„click”, () => {
document.querySelector(„.filter-btns .active”)?.classList.remove(„active”);
button.classList.add(„active”);

const filter = button.getAttribute(„data-filter”);
const items = document.querySelectorAll(„.gallery-item”);

items.forEach(item => {
if (filter === „all” || item.classList.contains(filter)) {
item.style.display = „block”;
} else {
item.style.display = „none”;
}
});
});
});

// LIGHTBOX
const lightbox = document.getElementById(„lightbox”);
const lightboxImg = document.getElementById(„lightbox-img”);

document.querySelectorAll(„.gallery-item img”).forEach(img => {
img.addEventListener(„click”, () => {
lightboxImg.src = img.dataset.large;
lightbox.style.display = „flex”;
});
});

lightbox.addEventListener(„click”, () => {
lightbox.style.display = „none”;
});
</script>