I've been working on integrating a gallery of images into my posts. My goal is to display 4 images initially, followed by a "load more" button that, when clicked, will reveal another set of 4 images, and so on. I have already created the HTML, CSS, and JavaScript for this functionality, but unfortunately, it doesn't seem to be working as expected. Can anyone provide assistance in identifying a solution to this issue? Thank you in advance. You can view the code on jsfiddle here.
html
<div class="shop-gallery">
<div class="product">
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
...
...
// css
.product img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
margin: auto;
max-width: calc(100% - 48px);
max-height: calc(100% - 48px);
}
.product {
width: 21%;
height: 0;
padding-top: 30%;
display: inline-block;
position: relative;
margin-bottom: 3.5%;
cursor: pointer;
}
.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}