enter code here# Problem with Fancybox Gallery #
Problem with Multiple galleries in the Carousel view
My problem is!
Category1 shows all images in the carousel instead of only Category1.
For Category2 to Category5, everything display correctly.
With All, everything show as it should.
Issue, as already mentioned, only in Category1.
Have tryed many things on the
I hope you can help me here
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root {
--header-height: 3rem;
--font-medium: 500;
}
/*===== Colores =====*/
:root {
--first-color: #49A687;
--complementary-color: #F99D6E;
--white-color: #FAFAFF;
--dark-color: #2A3B47;
--text-color: #697477;
--white-color-glass: rgba(250, 250, 255, 0.4);
}
/*===== Fuente y tipografia =====*/
:root {
--body-font: 'Montserrat', sans-serif;
--big-font-size: 6.25rem;
--h2-font-size: 1.25rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
}
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
section.res__gallery
{
padding: 20px;
width: 100%;
display: flex;
justify-self: center;
align-items: center;
flex-direction: column;
margin: 40px auto;
}
section.res__gallery ul
{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
section.res__gallery ul li
{
list-style: none;
background: var(--first-color);
color: var(--white-color);
font-size: var(--h2-font-size);
padding: 12px 20px;
margin: 5px;
letter-spacing: 1px;
cursor: pointer;
-ms-user-select: None;
-moz-user-select: None;
-webkit-user-select: None;
user-select: None;
}
section.res__gallery ul li.active
{
background: var(--complementary-color);
color: var(--white-color);
}
.product
{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
-ms-user-select: None;
-moz-user-select: None;
-webkit-user-select: None;
user-select: None;
}
.product .itembox
{
position: relative;
width: 200px;
height: 200px;
margin: 5px;
display: block;
}
.product .itembox.hide
{
display: none;
}
.product .itembox img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
a[data-fancybox] img {
cursor: zoom-in;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Gallery</title>
<link rel="stylesheet" href="gallery-style.css">
<link rel="stylesheet" href="tailwind.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css">
</head>
<body>
<section class="res__gallery">
<ul>
<li class="list active" data-filter="all">Alles</li>
<li class="list" data-filter="category1">category1</li>
<li class="list" data-filter="category2">category2</li>
<li class="list" data-filter="category3">category3</li>
<li class="list" data-filter="category4">category4</li>
<li class="list" data-filter="category5">category5</li>
</ul>
<div class="product">
<div class="itembox" data-item="category1">
<a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile1.jpg">
<img src="https://mectag-design.com/assets/images//mobile1.jpg" alt="mobile1" title="Mobile1">
</a>
</div>
<div class="itembox" data-item="category2">
<a data-fancybox="category2" data-caption="Short caption" href="https://mectag-design.com/assets/images/camera1.jpg">
<img src="https://mectag-design.com/assets/images/camera1.jpg" alt="camera1">
</a>
</div>
<div class="itembox" data-item="category3">
<a data-fancybox="category3" data-caption="Short caption" href="https://mectag-design.com/assets/images/watch1.jpg">
<img src="https://mectag-design.com/assets/images/watch1.jpg" alt="watch1">
</a>
</div>
<div class="itembox" data-item="category4">
<a data-fancybox="category4" data-caption="Short caption" href="https://mectag-design.com/assets/images/shoe1.jpg">
<img src="https://mectag-design.com/assets/images/shoe1.jpg" alt="shoe1">
</a>
</div>
<div class="itembox" data-item="category5">
<a data-fancybox="category5" data-caption="Short caption" href="https://mectag-design.com/assets/images/headphone1.jpg">
<img src="https://mectag-design.com/assets/images/headphone1.jpg" alt="headphone1">
</a>
</div>
<div class="itembox" data-item="category1">
<a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile2.jpg">
<img src="https://mectag-design.com/assets/images/mobile2.jpg" alt="mobile2">
</a>
</div>
<div class="itembox" data-item="category2">
<a data-fancybox="category2" data-caption="Short caption" href="https://mectag-design.com/assets/images/camera2.jpg">
<img src="https://mectag-design.com/assets/images/camera2.jpg" alt="camera2">
</a>
</div>
<div class="itembox" data-item="category3">
<a data-fancybox="category3" data-caption="Short caption" href="https://mectag-design.com/assets/images/watch2.jpg">
<img src="https://mectag-design.com/assets/images/watch2.jpg" alt="watch2">
</a>
</div>
<div class="itembox" data-item="category4">
<a data-fancybox="category4" data-caption="Short caption" href="https://mectag-design.com/assets/images/shoe2.jpg">
<img src="https://mectag-design.com/assets/images/shoe2.jpg" alt="shoe2">
</a>
</div>
<div class="itembox" data-item="category5">
<a data-fancybox="category5" data-caption="Short caption" href="https://mectag-design.com/assets/images/headphone2.jpg">
<img src="https://mectag-design.com/assets/images/headphone2.jpg" alt="headphone2">
</a>
</div>
<div class="itembox" data-item="category1">
<a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile3.jpg">
<img src="https://mectag-design.com/assets/images/mobile3.jpg" alt="mobile3">
</a>
</div>
<div class="itembox" data-item="category2">
<a data-fancybox="category2" data-caption="Short caption" href="https://mectag-design.com/assets/images/camera3.jpg">
<img src="https://mectag-design.com/assets/images/camera3.jpg" alt="camera3">
</a>
</div>
<div class="itembox" data-item="category3">
<a data-fancybox="category3" data-caption="Short caption" href="https://mectag-design.com/assets/images/watch3.jpg">
<img src="https://mectag-design.com/assets/images/watch3.jpg" alt="watch3">
</a>
</div>
<div class="itembox" data-item="category4">
<a data-fancybox="category4" data-caption="Short caption" href="https://mectag-design.com/assets/images/shoe3.jpg">
<img src="https://mectag-design.com/assets/images/shoe3.jpg" alt="shoe3">
</a>
</div>
<div class="itembox" data-item="category5">
<a data-fancybox="category5" data-caption="Short caption" href="https://mectag-design.com/assets/images/headphone3.jpg">
<img src="https://mectag-design.com/assets/images/headphone3.jpg" alt="headphone3">
</a>
</div>
<div class="itembox" data-item="category1">
<a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile4.jpg">
<img src="https://mectag-design.com/assets/images/mobile4.jpg" alt="mobile4">
</a>
</div>
<div class="itembox" data-item="category3">
<a data-fancybox="category3" data-caption="Short caption" href="https://mectag-design.com/assets/images/watch4.jpg">
<img src="https://mectag-design.com/assets/images/watch4.jpg" alt="watch4">
</a>
</div>
<div class="itembox" data-item="category4">
<a data-fancybox="category4" data-caption="Short caption" href="https://mectag-design.com/assets/images/shoe4.jpg">
<img src="https://mectag-design.com/assets/images/shoe4.jpg" alt="shoe4">
</a>
</div>
<div class="itembox" data-item="category5">
<a data-fancybox="category5" data-caption="Short caption" href="https://mectag-design.com/assets/images/headphone4.jpg">
<img src="https://mectag-design.com/assets/images/headphone4.jpg" alt="headphone4">
</a>
</div>
<div class="itembox" data-item="category1">
<a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile5.jpg">
<img src="https://mectag-design.com/assets/images/mobile5.jpg" alt="mobile5">
</a>
</div>
</div>
</section>
<script>
let list = document.querySelectorAll('.list');
let itemBox = document.querySelectorAll('.itembox');
for (let i = 0; i < list.length; i++) {
list[i].addEventListener('click', function () {
for (let j = 0; j < list.length; j++) {
list[j].classList.remove('active');
}
this.classList.add('active');
let dataFilter = this.getAttribute('data-filter');
for (let k = 0; k < itemBox.length; k++) {
itemBox[k].classList.remove('active');
itemBox[k].classList.add('hide');
Fancybox.bind(
'[data-mobile="category0"],[data-mobile="category1"],[data-fancybox="category2"],[data-fancybox="category3"],[data-fancybox="category4"],[data-fancybox="category5"]',
{
groupAll: false,
}
);
if (itemBox[k].getAttribute('data-item') == dataFilter ||
dataFilter == "all") {
itemBox[k].classList.remove('hide');
itemBox[k].classList.add('active');
Fancybox.bind(
'[data-mobile="category0"],[data-mobile="category1"],[data-fancybox="category2"],[data-fancybox="category3"],[data-fancybox="category4"],[data-fancybox="category5"]',
{
groupAll: true,
}
);
}
}
})
}
</script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>
</body>
</html>I would suggest to update selector to something like Fancybox.bind('[data-mobile="category0"].active', {}); because Fancybox displays every item that matches your selector, e.g., it internally uses something similar to document.querySelectorAll(YOUR_SELECTOR)