let galleries, shownAmount = 14, /* How many images will be shown by default */ viewMoreMessage = 'Show XX more'; /* Enter your message here, keep the XX for where the additional images count will be dynamically entered. Needs to look like this: 'See XX More' */ document.addEventListener('DOMContentLoaded', function() { galleries = document.querySelectorAll('.showmoreimages'); setTimeout(function(){ viewMoreGalleries(); }, 2700); window.addEventListener("resize", function() { setTimeout(function(){ viewMoreGalleries(); }, 777); }); }); function viewMoreGalleries(){ galleries.forEach((e,i) => { let galleryItems = e.querySelectorAll('.elementor-gallery-item'); let viewMoreImagesCount = 0; for (let i = shownAmount; i < galleryItems.length; i++){ galleryItems[i].style.display = 'none'; viewMoreImagesCount++; } let galleryOffsetDiv = e.querySelector('.elementor-widget-container'); let offSet = galleryItems[shownAmount - 1].getBoundingClientRect().bottom - e.getBoundingClientRect().top; galleryOffsetDiv.style.height = offSet + 'px'; galleryItems[shownAmount - 1].setAttribute('data-count', viewMoreMessage.replace('XX',viewMoreImagesCount)); cssDiv.innerHTML = ` .showmoreimages .elementor-gallery-item:nth-child(${shownAmount}):before { content: attr(data-count); text-align: center; z-index: 5; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; /* Edit the below CSS to adjust the 'view more' card styling */ text-transform: uppercase; font-weight: 900; font-size: 1rem; font-family:inherit; width:90%; height:90%; color: white; background-color: rgba(0, 0, 0, 0.4); }` }); } let cssDiv = document.createElement('style'); document.querySelector('head').appendChild(cssDiv);