ARTICLE AD BOX
I have a problem: this website has an image gallery.
When I select a button (for example kaplica), the images are filtered (images are shown under all green buttons), and the selected images appear under the buttons.
The problem is that,
When I click on a thumbnail image, it opens, but when I click the right arrow, the next image from the entire list appears, not the next filtered image.How can I make this (possibly using JavaScript, perhaps Bootstrap) so that only the filtered images appear when the preview opens?
There is page "Gallery(Galeria)", for example a button called "chapel(kaplica)".
When I click this button, thumbnails appear under all the buttons.
When I click on a thumbnail, a large image appears.
When I click on the arrow, the next image appears, but from all the images, I want to see the next image, but with filtering.
For example, "chapel(kaplica)" has six images. I only want to see those six images when the image is large.
const filterButtons = document.querySelectorAll(".filter-btn");
const galleryItems = document.querySelectorAll(".gallery-item");
filterButtons.forEach((button) => {
button.addEventListener("click", () => {
filterButtons.forEach((btn) => {
btn.classList.remove("active");
});
button.classList.add("active");
const filterValue = button.dataset.filter;
galleryItems.forEach((item) => {
if (filterValue === "all" || item.classList.contains(filterValue)) {
item.classList.remove("hidden");
} else {
item.classList.add("hidden");
}
});
});
});
/*body {
font-family: "Poppins", sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 40px 20px;
color: #212529;
}*/
.gallery-container {
max-width: 1140px;
margin: 0 auto;
text-align: center;
}
/*h1 {
font-weight: 600;
font-size: 2.5rem;
margin-block: 0;
}*/
.gallery-container p {
color: #6c757d;
font-size: 1rem;
margin-bottom: 12px;
margin-top: 15px;
}
.filter-buttons {
margin-bottom: 50px;
}
.filter-btn {
/*background-color: transparent;*/
background-color: #008020;
border: none;
font-size: 16px;
/*color: #6c757d;*/
color: white;
padding: 12px 24px;
margin: 5px;
cursor: pointer;
border-radius: 50px;
font-weight: 500;
transition: all 0.3s ease;
}
.filter-btn:hover {
/*background-color: #e9ecef;*/
background-color: #F6A73F;
/*color: #212529;*/
color: black;
}
.filter-btn.active {
/*background-color: #212529;*/
background-color: #F6A73F;
/*color: #fff;*/
color: black;
font-style: italic;
font-weight: bold;
outline: none;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 25px;
}
.gallery-item {
border-radius: 16px;
/*box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);*/
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-5px);
/*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);*/
}
.gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.hidden {
display: none;
}
:root {
--lb-overlay-opacity: 0.8;
--lb-overlay-bg: black;
--lb-border-radius: 3px;
--lb-image-border-width: 4px;
--lb-image-border-color: white;
--lb-container-bg: white;
--lb-text-color: #ccc;
--lb-caption-link-color: #4ae;
--lb-number-color: #999999;
--lb-nav-transition-speed: 0.6s;
--lb-close-transition-speed: 0.2s;
}
body.lb-disable-scrolling {
overflow: hidden;
}
.lightboxOverlay {
position: fixed;
inset: 0;
z-index: 9999;
background-color: var(--lb-overlay-bg);
opacity: var(--lb-overlay-opacity);
display: none;
}
.lightbox {
position: fixed;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
outline: none;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: var(--lb-border-radius);
/* Image border */
border: var(--lb-image-border-width) solid var(--lb-image-border-color);
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: var(--lb-container-bg);
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
opacity: 0;
transition: opacity var(--lb-nav-transition-speed);
}
.lb-nav a.lb-prev:hover {
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
opacity: 0;
transition: opacity var(--lb-nav-transition-speed);
}
.lb-nav a.lb-next:hover {
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: var(--lb-text-color);
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-caption a {
color: var(--lb-caption-link-color);
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: var(--lb-number-color);
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
opacity: 0.7;
transition: opacity var(--lb-close-transition-speed);
}
.lb-data .lb-close:hover {
cursor: pointer;
opacity: 1;
}
html
{
background-image: url("../images/background_galeria.jpg");
}
#container
{
margin-top: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
width: 960px;
}
header
{
height: 85px;
background-color: #808080;
}
#logo
{
width: 130px;
height: 85px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
#image_gora
{
box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
-o-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
}
#napis
{
width: 830px;
height: 85px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
#napis_gora
{
color: #830808;
font-size: 35px;
text-shadow: 4px 4px 6px rgba(255, 255, 255, 1);
text-transform: uppercase;
}
.clear
{
clear: both;
}
#equal_height_columns
{
display: flex;
flex-wrap: wrap;
}
#nav, #main
{
display: flex;
}
nav
{
width: 130px;
background-color: #C0C0C0;
float: left;
}
menu
{
list-style-type: none;
text-align: center;
padding: 0;
position: sticky;
top: 0;
}
nav menu li a
{
text-decoration: none;
color: black;
border-bottom: solid;
font-size: 25px;
line-height: 50px;
font-weight: bold;
}
nav menu li a:hover, nav menu li a#active
{
font-style: italic;
font-weight: normal;
border-bottom: none;
color: white;
background-color: #0080C0;
border-radius: 30px;
padding: 10px;
cursor: pointer;
}
main
{
width: 830px;
background-color: #E0E0E0;
float: left;
}
#tekst
{
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
}
footer
{
height: 85px;
background-color: #808080;
}
#stopka_lewa
{
width: 130px;
float: left;
}
#html, #css, #js
{
width: 43px;
height: 85px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
#html:hover, #css:hover, #js:hover
{
opacity: 0.5;
}
#html_rozmiar
{
width: 50px;
height: 50px;
cursor: pointer;
}
#css_rozmiar
{
width: 59px;
height: 50px;
cursor: pointer;
}
#js_rozmiar
{
width: 90px;
height: 50px;
cursor: pointer;
}
#zegar
{
width: 250px;
height: 85px;
float: left;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
#stopka_prawa
{
width: 580px;
height: 85px;
float: left;
display: flex;
justify-content: right;
align-items: center;
font-size: 20px;
}
#stopka_napis
{
text-decoration: none;
font-style: italic;
color: #404040;
margin-right: 20px;
cursor: pointer;
}
#stopka_napis:hover
{
color: #008020;
font-weight: bold;
}
<script type="text/javascript">
function odliczanie()
{
var dzisiaj = new Date();
var dzien = dzisiaj.getDate();
if (dzien<10) {dzien = "0"+dzien;}
var miesiac = dzisiaj.getMonth()+1;
if (miesiac<10) {miesiac = "0"+miesiac;}
var rok = dzisiaj.getFullYear();
var godzina = dzisiaj.getHours();
if (godzina<10) {godzina = "0"+godzina;}
var minuta = dzisiaj.getMinutes();
if (minuta<10) {minuta = "0"+minuta;}
var sekunda = dzisiaj.getSeconds();
if (sekunda<10) {sekunda = "0"+sekunda;}
document.getElementById("zegar").innerHTML = godzina+":"+minuta+":"+sekunda+" | "+dzien+"/"+miesiac+"/"+rok;
setTimeout("odliczanie()",1000);
}
</script>
<body onload="odliczanie();">
<div id="container">
<header>
<div id="logo">
<img src="images/logo.png" id="image_gora" alt="logo">
</div>
<div id="napis">
<h1 id="napis_gora">Siostry Zmartwychwstanki - Zakopane</h1>
</div>
<div class="clear"></div>
</header>
<div id="equal_height_columns">
<div id="nav">
<nav>
<menu>
<li><a href="zakopane-siostry-zmartwychwstanki">Start</a></li>
<li><a href="gory">Góry</a></li>
<li><a href="galeria" id="active">Galeria</a></li>
<li><a href="kronika">Kronika</a></li>
<li><a href="kontakt">Kontakt</a></li>
<li><a href="bonus">Bonus</a></li>
<li><a href="zagadka">Zagadka</a></li>
<li><a href="frustrator">Frustr8tor</a></li>
<li><a href="szubienica">Szubienica</a></li>
<li><a href="sw-pawel">Św. Paweł</a></li>
</menu>
</nav>
</div>
<main id="main">
<div class="gallery-container">
<br/><div id="tekst">Wybierz kategorię zdjęć</div><br/>
<section>
<div class="filter-buttons">
<button class="filter-btn active" data-filter="wszystko">wszystko</button>
<button class="filter-btn" data-filter="kaplica">kaplica</button>
<button class="filter-btn" data-filter="dom1_pokoj1">pierwszy dom - pokój 1</button>
<button class="filter-btn" data-filter="dom1_pokoj2">pierwszy dom - pokój 2</button>
<button class="filter-btn" data-filter="dom1_pokoj3">pierwszy dom - pokój 3</button>
<button class="filter-btn" data-filter="dom1_pokoj4">pierwszy dom - pokój 4</button>
<button class="filter-btn" data-filter="dom1_pokoj5">pierwszy dom - pokój 5</button>
<button class="filter-btn" data-filter="dom1_pokoj6">pierwszy dom - pokój 6</button>
<button class="filter-btn" data-filter="dom1_jadalnia">pierwszy dom - jadalnia</button>
<button class="filter-btn" data-filter="dom1_zewnatrz">pierwszy dom na zewnątrz</button>
<button class="filter-btn" data-filter="parking">parking</button>
<button class="filter-btn" data-filter="ogrod">w ogrodzie</button>
<button class="filter-btn" data-filter="dom2_zewnatrz">drugi dom na zewnątrz</button>
<button class="filter-btn" data-filter="dom2_pokoj1">drugi dom - pokój 1</button>
<button class="filter-btn" data-filter="dom2_pokoj2">drugi dom - pokój 2</button>
<button class="filter-btn" data-filter="dom2_pokoj3">drugi dom - pokój 3</button>
<button class="filter-btn" data-filter="dom2_pokoj4">drugi dom - pokój 4</button>
<button class="filter-btn" data-filter="dom2_pokoj5">drugi dom - pokój 5</button>
<button class="filter-btn" data-filter="dom2_pokoj6">drugi dom - pokój 6</button>
<button class="filter-btn" data-filter="dom2_obrazy">drugi dom - obrazy na szkle</button>
<button class="filter-btn" data-filter="gory">widoki z gór</button>
</div>
</section>
<section>
<div class="gallery-grid">
<div class="gallery-item wszystko kaplica">
<a class="example-image-link" href="gallery/galeria_01.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_01_thumb.png" alt="galeria_01" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj1">
<a class="example-image-link" href="gallery/galeria_02.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_02_thumb.png" alt="galeria_02" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj1">
<a class="example-image-link" href="gallery/galeria_03.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_03_thumb.png" alt="galeria_03" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj2">
<a class="example-image-link" href="gallery/galeria_04.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_04_thumb.png" alt="galeria_04" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj2">
<a class="example-image-link" href="gallery/galeria_05.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_05_thumb.png" alt="galeria_05" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj3">
<a class="example-image-link" href="gallery/galeria_06.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_06_thumb.png" alt="galeria_06" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj3">
<a class="example-image-link" href="gallery/galeria_07.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_07_thumb.png" alt="galeria_07" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj3">
<a class="example-image-link" href="gallery/galeria_08.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_08_thumb.png" alt="galeria_08" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj4">
<a class="example-image-link" href="gallery/galeria_09.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_09_thumb.png" alt="galeria_09" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj4">
<a class="example-image-link" href="gallery/galeria_10.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_10_thumb.png" alt="galeria_10" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj4">
<a class="example-image-link" href="gallery/galeria_11.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_11_thumb.png" alt="galeria_11" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj5">
<a class="example-image-link" href="gallery/galeria_12.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_12_thumb.png" alt="galeria_12" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj5">
<a class="example-image-link" href="gallery/galeria_13.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_13_thumb.png" alt="galeria_13" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj6">
<a class="example-image-link" href="gallery/galeria_14.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_14_thumb.png" alt="galeria_14" /></a>
</div>
<div class="gallery-item wszystko dom1_pokoj6">
<a class="example-image-link" href="gallery/galeria_15.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_15_thumb.png" alt="galeria_15" /></a>
</div>
<div class="gallery-item wszystko dom1_jadalnia">
<a class="example-image-link" href="gallery/galeria_16.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_16_thumb.png" alt="galeria_16" /></a>
</div>
<div class="gallery-item wszystko dom1_zewnatrz">
<a class="example-image-link" href="gallery/galeria_17.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_17_thumb.png" alt="galeria_17" /></a>
</div>
<div class="gallery-item wszystko dom1_zewnatrz parking">
<a class="example-image-link" href="gallery/galeria_18.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_18_thumb.png" alt="galeria_18" /></a>
</div>
<div class="gallery-item wszystko dom1_zewnatrz">
<a class="example-image-link" href="gallery/galeria_19.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_19_thumb.png" alt="galeria_19" /></a>
</div>
<div class="gallery-item wszystko dom1_zewnatrz">
<a class="example-image-link" href="gallery/galeria_20.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_20_thumb.png" alt="galeria_20" /></a>
</div>
(...)
<div class="gallery-item wszystko kaplica">
<a class="example-image-link" href="gallery/galeria_106.jpg" data-lightbox="example-set" data-title=""><img class="example-image" src="gallery/galeria_106_thumb.png" alt="galeria_106" /></a>
</div>
</div>
</section>
</div>
</main>
<div class="clear"></div>
</div>
<footer>
<div id="stopka_lewa">
<div id="html">
<a href="https://validator.w3.org/#validate_by_input" target="_blank"><img src="images/belka_dol_html5.png" id="html_rozmiar" alt="html5"></a>
</div>
<div id="css">
<a href="https://jigsaw.w3.org/css-validator/#validate_by_input" target="_blank"><img src="images/belka_dol_css3.png" id="css_rozmiar" alt="css3"></a>
</div>
<div id="js">
<a href="https://www.site24x7.com/tools/javascript-validator.html" target="_blank"><img src="images/belka_dol_javascript.png" id="js_rozmiar" alt="js"></a>
</div>
</div>
<div id="zegar"></div>
<div id="stopka_prawa">
<a href="zagadka.php" id="stopka_napis">Created by CSfC & Team</a>
</div>
<div class="clear"></div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/js/lightbox-plus-jquery.js"></script>
