如何显示接下来的三幅图像，点击“加载更多"按钮 [英] How to display the next three images click on load more button

问题描述

我需要加载更多按钮才能显示图像.在页面加载中，我正在显示3张图像，然后单击加载更多"按钮，然后屏幕上将显示接下来的3张图像.

I need a load more button to display the image. On page load, I am displaying 3 images and after click on load more button, then next 3 images will display on the screen.

我尝试了以下代码，但无法正常工作.你能帮我这个忙吗?

I tried below code but it's not working. would you help me out in this?

$(function() {
  $(".item").slice(0, 2).show(); // select the first ten
  $("#load").click(function(e) { // click event for load more
    e.preventDefault();
    $(".item:hidden").slice(0, 2).show(); // select next 10 hidden divs and show them
    if ($(".item:hidden").length == 0) { // check if any hidden divs still exist
      alert("No more divs"); // alert if there are none left
    }
  });
});

.lightgallery1 a {
  width: 30.33%;
  margin: auto;
  display: inline-block;
  padding: 0px 20px 20px 0;
}

.lightgallery1 a img {
  width: 100%;
}

a {
  display: none;
}

<div class="lightgallery1">
  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a>

  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a>

  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a>

  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a>

</div>

<a href="#" id="load">Load More</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐答案

您的CSS错误.使用:

Your css was wrong. Use:

.lightgallery1 a {
  display: none;
}

您的代码显示2张图像.如果要显示3，请将 .slice(0，2)更改为 .slice(0，3)

Your code shows 2 images. If you want to show 3 change .slice(0, 2) to .slice(0, 3)

$(function() {
  $(".item").slice(0, 2).show(); // select the first ten
  $("#load").click(function(e) { // click event for load more
    e.preventDefault();
    $(".item:hidden").slice(0, 2).show(); // select next 10 hidden divs and show them
    if ($(".item:hidden").length == 0) { // check if any hidden divs still exist
      alert("No more divs"); // alert if there are none left
    }
  });
});

.lightgallery1 a {
  padding: 0px 20px 20px 0;
  display: none;
}

.lightgallery1 a img {
  width: 33%;
}

<div class="lightgallery1">
  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a>

  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a>

  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a>

  <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a>

  <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a>

</div>
<div>
<a href="#" id="load">Load More</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这篇关于如何显示接下来的三幅图像，点击“加载更多"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！