jQuery 过滤的图库 - “All”类中的照片仅在刷新页面后加载

问：

我做了一个过滤的画廊，它几乎可以按照我的意愿工作。将显示所有照片，然后单击给定类别后，仅显示选定的照片组。到目前为止还可以，但是当我回到“全部”类别时，我没有看到任何图片。我必须刷新页面才能显示它们。我怀疑这与异步有关。这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- magnific popup js cdn link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
  $(document).ready(function () {
    $(".buttons").click(function () {
      $(this).addClass("active").siblings().removeClass("active");

      var filter = $(this).attr("data-filter");

      if (filter == "all") {
        $(".image").show(400);
      } else {
        $(".image")
          .not("." + filter)
          .hide(200);
        $(".image")
          .filter("." + filter)
          .show(400);
      }
    });

    $(".gallery").magnificPopup({
      delegate: "a",
      type: "image",
      gallery: {
        enabled: true,
      },
    });
  });
</script>

这是我的第一个网站，我是初学者。我想在不刷新网站的情况下查看“全部”类的图片。我应该在代码中更改哪些内容？

这是定义按钮的 HTML 代码部分：

<div class="gallery" id="galeria">
  <h1>Galeria</h1>
    <ul class="controls">
      <li class="buttons active" data-filer="all">Wszystkie</li>
      <li class="buttons" data-filter="Remontowo-budowlane">
              Remontowo-budowlane </li>
      <li class="buttons" data-filter="Mycie">Mycie i czyszczenie</li>
      <li class="buttons" data-filter="Prace_montażowe">
              Prace montażowe i inne </li>
      <li class="buttons" data-filter="Zabezpieczenie_przed_ptakami">
              Zabezpieczenie przed ptakami </li>
          </ul>
             

    <div class="image-container">
        <a href="https://i.postimg.cc/qRF05wnd/rem-bud1.jpg"
           class="image Remontowo-budowlane">
           <img src="https://i.postimg.cc/qRF05wnd/rem-bud1.jpg" 
           alt="" /> </a> 
        <a href="https://i.postimg.cc/DZ0n6HSg/rem-bud2.jpg"  
           class="image Remontowo-budowlane">
           <img src="https://i.postimg.cc/DZ0n6HSg/rem-bud2.jpg" 
            alt="" /> </a>
       <a href="https://i.postimg.cc/nhxs2VpG/rem-bud3.jpg"         
          class="image Remontowo-budowlane">
          <img src="https://i.postimg.cc/nhxs2VpG/rem-bud3.jpg" 
          alt="" /> </a>
        (....and so on for the whole gallery) </div> </div>