title: Fancybox Gallery: carousel view error on Multiple galleries
body: <p><code>enter code here</code># Problem with Fancybox Gallery #
  <em>Problem with Multiple galleries in the Carousel view</em></p>
  <blockquote>
  <p>My problem is! <br />
  Category1 shows all images in the carousel instead of only Category1. <br />
  For Category2 to Category5, everything display correctly. <br />
  With All, everything show as it should. <br />
  Issue, as already mentioned, only in Category1.<br />
  Have tryed many things on the <br /></p>
  </blockquote>
  <blockquote>
  <p>I hope you can help me here</p>
  </blockquote>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&amp;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;
    }
  
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Responsive Gallery&lt;/title&gt;
  
          &lt;link rel="stylesheet" href="gallery-style.css"&gt;
          &lt;link rel="stylesheet" href="tailwind.min.css"&gt;
          &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;section class="res__gallery"&gt;
              &lt;ul&gt;
                  &lt;li class="list active" data-filter="all"&gt;Alles&lt;/li&gt;
                  &lt;li class="list" data-filter="category1"&gt;category1&lt;/li&gt;
                  &lt;li class="list" data-filter="category2"&gt;category2&lt;/li&gt;
                  &lt;li class="list" data-filter="category3"&gt;category3&lt;/li&gt;
                  &lt;li class="list" data-filter="category4"&gt;category4&lt;/li&gt;
                  &lt;li class="list" data-filter="category5"&gt;category5&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="product"&gt;
                  &lt;div class="itembox" data-item="category1"&gt;
                      &lt;a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile1.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images//mobile1.jpg" alt="mobile1" title="Mobile1"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category2"&gt;
                      &lt;a data-fancybox="category2" data-caption="Short caption" href="https://mectag-design.com/assets/images/camera1.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/camera1.jpg" alt="camera1"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category3"&gt;
                      &lt;a data-fancybox="category3" data-caption="Short caption" href="https://mectag-design.com/assets/images/watch1.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/watch1.jpg" alt="watch1"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category4"&gt;
                      &lt;a data-fancybox="category4" data-caption="Short caption" href="https://mectag-design.com/assets/images/shoe1.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/shoe1.jpg" alt="shoe1"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category5"&gt;
                      &lt;a data-fancybox="category5" data-caption="Short caption" href="https://mectag-design.com/assets/images/headphone1.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/headphone1.jpg" alt="headphone1"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category1"&gt;
                      &lt;a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile2.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/mobile2.jpg" alt="mobile2"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category2"&gt;
                      &lt;a data-fancybox="category2" data-caption="Short caption" href="https://mectag-design.com/assets/images/camera2.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/camera2.jpg" alt="camera2"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category3"&gt;
                      &lt;a data-fancybox="category3" data-caption="Short caption" href="https://mectag-design.com/assets/images/watch2.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/watch2.jpg" alt="watch2"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category4"&gt;
                      &lt;a data-fancybox="category4" data-caption="Short caption" href="https://mectag-design.com/assets/images/shoe2.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/shoe2.jpg" alt="shoe2"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category5"&gt;
                      &lt;a data-fancybox="category5" data-caption="Short caption" href="https://mectag-design.com/assets/images/headphone2.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/headphone2.jpg" alt="headphone2"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category1"&gt;
                      &lt;a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile3.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/mobile3.jpg" alt="mobile3"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category2"&gt;
                      &lt;a data-fancybox="category2" data-caption="Short caption" href="https://mectag-design.com/assets/images/camera3.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/camera3.jpg" alt="camera3"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category3"&gt;
                      &lt;a data-fancybox="category3" data-caption="Short caption" href="https://mectag-design.com/assets/images/watch3.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/watch3.jpg" alt="watch3"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category4"&gt;
                      &lt;a data-fancybox="category4" data-caption="Short caption" href="https://mectag-design.com/assets/images/shoe3.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/shoe3.jpg" alt="shoe3"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category5"&gt;
                      &lt;a data-fancybox="category5" data-caption="Short caption" href="https://mectag-design.com/assets/images/headphone3.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/headphone3.jpg" alt="headphone3"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category1"&gt;
                      &lt;a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile4.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/mobile4.jpg" alt="mobile4"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category3"&gt;
                      &lt;a data-fancybox="category3" data-caption="Short caption" href="https://mectag-design.com/assets/images/watch4.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/watch4.jpg" alt="watch4"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category4"&gt;
                      &lt;a data-fancybox="category4" data-caption="Short caption" href="https://mectag-design.com/assets/images/shoe4.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/shoe4.jpg" alt="shoe4"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category5"&gt;
                      &lt;a data-fancybox="category5" data-caption="Short caption" href="https://mectag-design.com/assets/images/headphone4.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/headphone4.jpg" alt="headphone4"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="itembox" data-item="category1"&gt;
                      &lt;a data-mobile="category1" data-caption="Short caption" href="https://mectag-design.com/assets/images/mobile5.jpg"&gt;
                          &lt;img src="https://mectag-design.com/assets/images/mobile5.jpg" alt="mobile5"&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
  
          &lt;script&gt;
              let list = document.querySelectorAll('.list');
              let itemBox = document.querySelectorAll('.itembox');
  
              for (let i = 0; i &lt; list.length; i++) {
                  list[i].addEventListener('click', function () {
                      for (let j = 0; j &lt; list.length; j++) {
                          list[j].classList.remove('active');
                      }
                      this.classList.add('active');
  
                      let dataFilter = this.getAttribute('data-filter');
  
                      for (let k = 0; k &lt; 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,
                                  }
                              );
                          }
  
                      }
                  })
              }
  
  
          &lt;/script&gt;
          &lt;script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>