Easy Elementor Pro Gallery 'View More Images' Design!

Table of Contents

In this article we will learn how to add a 'view X more' image to an Elementor Pro gallery element.

By default it will only show a predetermined amount of images, and the rest of them will be viewable in the lightbox only.

Credits for the idea for this tutorial to Pete Grant, and credits to David Miles for providing the CSS part of the code. Both Facebook Elementor Community members.

This design works for all the Elementor Pro gallery layouts (the Grid layout, the Justified layout, and the Masonry layout). It works better for Single gallery, but it does still work with Multiple.

To begin with, give your Elementor Pro gallery a class name

Give all your Elementor pro gallery elements that you want this 'View X More' the class name 'showmoreimages'.

The code will work automatically for all of them.

Easy Elementor Pro Gallery 'View More Images' Design! 1

Then, copy paste this code in an HTML element, on the same page

Easy Elementor Pro Gallery 'View More Images' Design! 2

<script>

let galleries,
shownAmount = 9, /* 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);
</script>

Now, modify the code to fit your Elementor Pro Gallery view more design

At the very start of the code, you will find a value for 'shownAmount', as well as a 'viewMoreMessage'. Edit those to fit your needs.

Easy Elementor Pro Gallery 'View More Images' Design! 3

Lower down in the code, you will see this CSS comment : /* Edit the below CSS to adjust the 'view more' card styling */ . That's where you will be able to change things like the font and background color and font-size and family.

Easy Elementor Pro Gallery 'View More Images' Design! 4

Finally, enjoy your new Elementor Pro Gallery View X More Design!

Important: this will only work on the front end, and not in the editor. In the editor, all the images will still be displayed normally.

Let me know if everything worked out alright!

Comments
To see the comments, click 'accept all' in the Cookie settings (lower right sticky icon). Then refresh the page.

If you still don't see the comments, try using Chrome or Edge, as you probably you have an adblock or a browser such as Firefox or Brave.