Gallery Grid Load more

<script>
document.addEventListener("DOMContentLoaded", function () {
    const galleryWrappers = document.querySelectorAll('.gallery-grid-wrapper');
    
    if (galleryWrappers.length === 0) {
        console.error("No gallery wrappers found.");
        return;
    }

    galleryWrappers.forEach(function(galleryWrapper) {
        const loadMoreButton = document.createElement('button');
        const imagesPerBatch = 8;
        let currentImageIndex = 0;
        
        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 = "#fff";
        loadMoreButton.style.color = "#545454";
        loadMoreButton.style.border = "2px solid #545454";
        loadMoreButton.style.fontSize = "16px";
        loadMoreButton.style.textAlign = "center";
        
        galleryWrapper.parentElement.appendChild(loadMoreButton);
        
        function loadMoreImages() {
            const allItems = galleryWrapper.querySelectorAll('.gallery-grid-item');
            
            for (let i = currentImageIndex; i < currentImageIndex + imagesPerBatch && i < allItems.length; i++) {
                const imgElement = allItems[i].querySelector('img');
                if (imgElement && imgElement.getAttribute('data-src')) {
                    imgElement.src = imgElement.getAttribute('data-src');
                    imgElement.style.display = 'block'; 
                }
                
                allItems[i].style.display = 'block'; 
            }
            
            currentImageIndex += imagesPerBatch;
            triggerMasonryLayout();
            
            if (currentImageIndex >= allItems.length) {
                loadMoreButton.style.display = "none";
            }
        }
        
        function hideAllImages() {
            const allItems = galleryWrapper.querySelectorAll('.gallery-grid-item');
            allItems.forEach((item, index) => {
                if (index >= imagesPerBatch) {
                    item.style.display = 'none';
                }
            });
        }
        
        function triggerMasonryLayout() {
            const event = new Event('resize');
            window.dispatchEvent(event);
        }
        
        hideAllImages();
        loadMoreImages(); 
        loadMoreButton.addEventListener('click', loadMoreImages);
    });
});
</script>