javascript - 我正在创建一个可过滤的灯箱画廊。过滤器/按钮适用于灯箱，但按钮不会更改网站本身的图像

我的目标是创建一个带有可选择按钮的图库，这些按钮将更改图像，一旦选择过滤器，这些按钮也会过滤灯箱图库。

一旦每个按钮被选中，灯箱过滤器就会工作，显示来自每个过滤器的正确图像，但按钮不会改变网站本身的图像。

这是供引用的站点:http://www.barbarabielpainting.com/new/

很抱歉弄得一团糟，它还没有完全设计好样式。

我对 JS 不是很熟悉，但我查看了这些文件，对我来说，引用似乎是正确的。我认为问题可能在于 onclick="call(this.id) 或 JS 本身。

  <div class="tz-gallery">
        <div class="buttoncenter">
        <div class="buttoncontainer" id="myBtnContainer">
  <button class="filter-button btn-default" id="all" onclick="call(this.id)">Show all</button>
  <button class="filter-button btn-default" id="series1" onclick="call(this.id)">Series 1</button>
  <button class="filter-button btn-default" id="series2" onclick="call(this.id)">Series 2</button>
  <button class="filter-button btn-default" id="series3"  onclick="call(this.id)">Series 3</button>
</div>

        </div>

        <div class="row">

            <div class="col-sm-6 col-md-4 show column series1">
                <div class="thumbnail">
                    <a class="glightbox gallery_product filter filter-button series1" href="img/paintings/1.jpg">
                        <img src="img/paintings/1.jpg" alt="Park">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 show column series2">
                <div class="thumbnail">
                    <a class="glightbox gallery_product filter filter-button series2" href="img/paintings/2.jpg">
                        <img src="img/paintings/2.jpg" alt="Bridge">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 show column series3">
                <div class="thumbnail">
                    <a class="glightbox gallery_product filter filter-button series3" href="img/paintings/3.jpg">
                        <img src="img/paintings/3.jpg" alt="Tunnel">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 show column series1">
                <div class="thumbnail">
                    <a class="glightbox gallery_product filter filter-button series1" href="img/paintings/1.jpg">
                        <img src="img/paintings/1.jpg" alt="Coast">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 show column series2">
                <div class="thumbnail">
                    <a class="glightbox gallery_product filter filter-button series2" href="img/paintings/2.jpg">
                        <img src="img/paintings/2.jpg" alt="Rails">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 show column series3">
                <div class="thumbnail">
                    <a class="glightbox gallery_product filter filter-button series3" href="img/paintings/3.jpg">
                        <img src="img/paintings/3.jpg" alt="Traffic">
                    </a>
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>


    <!-- ======== Java Script ======== -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
        <script src="js/glightbox.min.js"></script>
        <script src="js/index.js"></script>


</body>
</html>
    <script src="js/plugins/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap 4.1.3 -->
    <script src="js/plugins/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Slick Slider -->
    <script src="js/plugins/slick.min.js"></script>
    <!-- Couner Up-->
    <script src="js/plugins/jquery.waypoints.min.js"></script>
    <script src="js/plugins/jquery.counterup.min.js"></script>
    <!-- Wow JS -->
    <script src="js/plugins/wow.min.js"></script>
    <!-- Magnific Popup-->
    <script src="js/plugins/magnific-popup.min.js"></script>
    <!-- Main Js-->
    <script src="js/main.js"></script>

var lightboxDescription = GLightbox({
  selector: 'glightbox'
});


function call(id) {
  const items = Array.from(document.getElementsByClassName("filter"));
  items.map(function (item, index) {
    console.log(item);
    if (id === "all") {
      item.classList.remove('d-none');
      item.classList.add('fadeIn','glightbox');
      setTimeout(clean,500);
    } else {
      const check = items[index].classList.contains(id);
      console.log(check);

      if (check) {
        item.classList.remove('d-none');
        item.classList.add('fadeIn','glightbox');
      } else {
        item.classList.add('d-none');
        item.classList.remove('fadeIn','glightbox');
      }
    }
  })
}

function clean() {
  const items = Array.from(document.getElementsByClassName("filter"));
  items.map(function (item, index) {
    item.classList.remove('fadeIn');
  })
}

.gallery_product
{
    margin-bottom: 30px;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.filter-button
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}
.filter-button.active
{
    background-color: #42B32F;
    color: white;
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

我想要的结果是一个可过滤的灯箱画廊，一旦选择了每个过滤器，以及在灯箱中放大图像后，它就会在网站上显示正确的图像。

当前结果仅在图片在灯箱中放大后显示过滤后的图片，但过滤器不会更改网站本身的图片。

最佳答案

目前你没有隐藏列表中的元素，你可以通过类似的东西来实现(我只改变了一些部分，你仍然需要你当前的调用方法，但替换 onclick 中的调用)，我删除了 show 类: HTML:

<div class="tz-gallery">
  <div class="buttoncenter">
    <div class="buttoncontainer" id="myBtnContainer">
      <button class="filter-button btn-default" id="all" onclick="callEnhanced(this.id)">Show all</button>
      <button class="filter-button btn-default" id="series1" onclick="callEnhanced(this.id)">Series 1</button>
      <button class="filter-button btn-default" id="series2" onclick="callEnhanced(this.id)">Series 2</button>
      <button class="filter-button btn-default" id="series3" onclick="callEnhanced(this.id)">Series 3</button>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6 col-md-4 column series1 filter2">
      <div class="thumbnail">
        <a class="glightbox gallery_product filter filter-button series1" href="img/paintings/1.jpg">
          <img src="img/paintings/1.jpg" alt="Park">
        </a>
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 column show series2 filter2">
      <div class="thumbnail">
        <a class="glightbox gallery_product filter filter-button series2" href="img/paintings/2.jpg">
          <img src="img/paintings/2.jpg" alt="Bridge">
        </a>
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 column show series3 filter2">
      <div class="thumbnail">
        <a class="glightbox gallery_product filter filter-button series3" href="img/paintings/3.jpg">
          <img src="img/paintings/3.jpg" alt="Tunnel">
        </a>
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 column show series1 filter2">
      <div class="thumbnail">
        <a class="glightbox gallery_product filter filter-button series1" href="img/paintings/1.jpg">
          <img src="img/paintings/1.jpg" alt="Coast">
        </a>
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 column show series2 filter2">
      <div class="thumbnail">
        <a class="glightbox gallery_product filter filter-button series2" href="img/paintings/2.jpg">
          <img src="img/paintings/2.jpg" alt="Rails">
        </a>
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 column show series3 filter2">
      <div class="thumbnail">
        <a class="glightbox gallery_product filter filter-button series3" href="img/paintings/3.jpg">
          <img src="img/paintings/3.jpg" alt="Traffic">
        </a>
        <div class="caption">
          <h3>Thumbnail label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript:

function callEnhanced(id) {
  call(id); // Here we call your current call method
  const items = Array.from(document.getElementsByClassName("filter2")); // here we filter)
  items.map(function (item, index) {
    if (id === "all") {
      item.classList.add('show');
    } else {
      var check = items[index].classList.contains(id);
      if (check) {
        item.classList.add('show');
      } else {
        item.classList.remove('show');
      }
    }
  })
}

关于javascript - 我正在创建一个可过滤的灯箱画廊。过滤器/按钮适用于灯箱，但按钮不会更改网站本身的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57516080/

javascript - 我正在创建一个可过滤的灯箱画廊。过滤器/按钮适用于灯箱，但按钮不会更改网站本身的图像

上一篇：javascript - HTML 列表中的图像 - 不缩进文本

下一篇：javascript - 模态弹出窗口无法正常工作(希望背景页面变暗)