Question

我需要加载更多按钮才能显示图像。在页面加载时，我正在显示3张图像，然后单击“加载更多”按钮，然后屏幕上将显示接下来的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 {
  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>

Answer 1

您的CSS错误。使用：

.lightgallery1 a {
  display: none;
}

您的代码显示2张图像。如果要显示3，请将.slice(0, 2)更改为.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>

Answer 2

尝试这种方法：

var links = [
    "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
  "https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg",
  "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
  "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
  "https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg",
  "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
  "https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg",
  "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg",
  "https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg",
  "https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg",
  "https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg",
];

var $gallery  = $(".lightgallery1").first();
var $loadMore = $("#load");

function loadMore(e) {
  
  for(var i = 0; i < 3; i++) {
     
    if(links.length) {

      var src   = links.pop();
      var $link = $("<a>");
      var $img  = $("<img>");

      $img.attr("src", src);
      $link.attr("href", src).addClass("item");
      
      $link.append($img);
      $gallery.append($link);

    } else {
      $loadMore.hide();
    }
    
  }
  
}

$loadMore.on("click", loadMore);
loadMore();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="lightgallery1"></div>

<button id="load">Load More</button>

如何显示接下来的三幅图像，点击“加载更多”按钮

2 个答案: