I'm looking to add a load more button to reveal additional images. Currently, the page loads with 3 images visible, and upon clicking the load more button, the next set of 3 images should be displayed on the screen.
Unfortunately, the code I've attempted below isn't functioning as expected. Can someone assist me in resolving this issue?
$(function() {
$(".item").slice(0, 2).show(); // display the initial three
$("#load").click(function(e) { // click event for loading more
e.preventDefault();
$(".item:hidden").slice(0, 2).show(); // show the next hidden divs
if ($(".item:hidden").length == 0) { // check for any remaining hidden divs
alert("No more divs"); // display an 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>
<!-- Additional image links go here -->
</div>
<a href="#" id="load">Load More</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>