How To Display The Next Three Images Click On Load More Button

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 b

Solution 1:

Your css was wrong. Use:

.lightgallery1a {
  display: none;
}

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 themif ($(".item:hidden").length == 0) { // check if any hidden divs still existalert("No more divs"); // alert if there are none left
    }
  });
});

.lightgallery1a {
  padding: 0px20px20px0;
  display: none;
}

.lightgallery1aimg {
  width: 33%;
}

<divclass="lightgallery1"><ahref="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"><imgsrc="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a><ahref="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"><imgsrc="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a><ahref="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"class="item"><imgsrc="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a><ahref="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"class="item"><imgsrc="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a><ahref="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"class="item"><imgsrc="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a><ahref="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"class="item"><imgsrc="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a><ahref="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"class="item"><imgsrc="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a><ahref="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"class="item"><imgsrc="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a><ahref="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"class="item"><imgsrc="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a><ahref="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"class="item"><imgsrc="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a><ahref="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"class="item"><imgsrc="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a></div><div><ahref="#"id="load">Load More</a></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Solution 2:

Try this approach:

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");

functionloadMore(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();

.lightgallery1a {
  width: 30.33%;
  margin: auto;
  display: inline-block;
  padding: 0px20px20px0;
}

.lightgallery1aimg {
  width: 100%;
}

a {
 /* display: none; */
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="lightgallery1"></div><buttonid="load">Load More</button>