New code doesn't do anything different. Gallery Wrapper (or section) still doesn't expand to accommodate for subsequently loaded images, but I have figured it out now and am sharing it with anyone who needs it:
Inject this into your site's footer:
<script>
document.addEventListener("DOMContentLoaded", function () {
// Target the gallery wrapper
const galleryWrapper = document.querySelector('.gallery-masonry-wrapper');
// Check if the gallery wrapper exists
if (!galleryWrapper) {
console.error("Gallery wrapper not found.");
return;
}
const loadMoreButton = document.createElement('button');
const imagesPerBatch = 6;
let currentImageIndex = 0;
// Create the "Load More" button with some basic styling
loadMoreButton.innerHTML = "Load More";
loadMoreButton.style.display = "block";
loadMoreButton.style.margin = "20px auto";
loadMoreButton.style.padding = "10px 20px";
loadMoreButton.style.cursor = "pointer";
loadMoreButton.style.backgroundColor = "#000";
loadMoreButton.style.color = "#fff";
loadMoreButton.style.border = "none";
loadMoreButton.style.fontSize = "16px";
loadMoreButton.style.textAlign = "center";
// Insert the button after the gallery masonry wrapper
galleryWrapper.parentElement.appendChild(loadMoreButton);
// Function to load images in batches of 6
function loadMoreImages() {
const allItems = galleryWrapper.querySelectorAll('.gallery-masonry-item');
for (let i = currentImageIndex; i < currentImageIndex + imagesPerBatch && i < allItems.length; i++) {
const imgElement = allItems[i].querySelector('img');
// Make sure to use the data-src attribute to lazy load images
if (imgElement && imgElement.getAttribute('data-src')) {
imgElement.src = imgElement.getAttribute('data-src');
imgElement.style.display = 'block'; // Show the image if hidden
}
allItems[i].style.display = 'block'; // Show the corresponding gallery item
}
currentImageIndex += imagesPerBatch;
// Trigger a re-layout for the Masonry grid after images load
triggerMasonryLayout();
// Hide the "Load More" button if all images have been loaded
if (currentImageIndex >= allItems.length) {
loadMoreButton.style.display = "none";
}
}
// Function to initially hide all images except the first batch
function hideAllImages() {
const allItems = galleryWrapper.querySelectorAll('.gallery-masonry-item');
allItems.forEach((item, index) => {
if (index >= imagesPerBatch) {
item.style.display = 'none';
}
});
}
// Function to trigger the Masonry layout recalculation
function triggerMasonryLayout() {
const event = new Event('resize'); // Simulate a window resize
window.dispatchEvent(event);
}
// Initial setup: hide all images except the first batch
hideAllImages();
loadMoreImages(); // Load the first batch of images
// Event listener to load more images on button click
loadMoreButton.addEventListener('click', loadMoreImages);
});
</script>
