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.
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.
Then, copy paste this code in an HTML element, on the same page
<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.
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.
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.
Elementor Pro Gallery View More Images Template
This download gets you the following template :
Elementor Pro Gallery View More Images Template
Related tutorial : Elementor Pro Gallery View More Images
Let me know if everything worked out alright!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
28 Responses
the load more link is not clickable.... it opens the image behind it
That's what this design is about! 'Load more' here is to load the additional images, in the lightbox, instead of showing all of them on the page.
Hello, it does not work for me, I only want to put 4 images and it does not show less than 8.
Code is tested working. You just need to change the
shownAmount = 8, /* How many images will be shown by default on desktop */
at the start of the code, to
shownAmount = 4, /* How many images will be shown by default on desktop */
And it works. Maybe try clearing your server and optimization plugin if it doesn't, you might be loading an older version of the code.
here it is, and yes, I put 4 images to show in the html, but it still shows 8
http://143.198.238.88/properties/lujoso-departamento-1-habitacion-en-lomas-chapultepec/
Do you prefer that I contact you by face chat to send you images?
You have the code three times on the page. You need to have it only one time in total. And adjust that one time to have the '4' instead of '8', it will work!
I just purchased Gallery View More code
I did the instructions but is not working. Probably I am doing something wrong.
Is not changing the number of of images and the text.
Hey Leonardo!
Do you have the code only one time on the page? Could you share your URL so that I can have a look?
I works, thanks
When loading the page, you can briefly view all photos and then it reduces to only 4 imagenes. Is there a way so it doesnt show all the images when loading?
Not working at all.
Or rather ... is working, but only as a lightbox.
This IS the design, view more in the lightbox. This tutorial is NOT for a click to reveal more images, in the current page.
Im using gallery Multiple, its working under a single category and ALL, but the images in other categories are not showing in the front end
This design might not work for multiple gallery...
It works, but It adds a huge white blank space under my footer!
Hey Jasem!
That should be an easy fix. What's your URL?
It's not working with ACF Galleries?
I got error
Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')
Should work fine for all Elementor Pro gallery elements....
Try to change 2700 here to 3700 or more, until it works. If it doesn't, send me the URL I will check.
setTimeout(function(){
viewMoreGalleries();
}, 2700);
Hi Maxime,
Thank you for your reply.
I already try to change as you told above. But came out with same error.
I don't have the URL, it's on localhost.
Here what I got,
1st using smart grid AE ACF Gallery, I put 10 images with showing 5 images. The "view more" not working, but showing 9 images only, missing 1.
2nd using pro widget gallery, showing 10 images and "view more" not working.
Thank you
This tutorial is for Elementor Pro gallery element, not smart grid AE ACF Gallery,
Hello Maxime,
Just to check if I understood correctly. If I have 30 images in my gallery and I show 8 of them, when I click on View More, the 22 other images will be shown in the lightbox?
Hey Jocelyn!
Yes that's what this tutorial is for!
hi
thanks i am new to this.
my gallery page is using filter also. it seems a bit strange so it is not loading more images. how to accomodate? thanks
my site: pastpens.com
gallery page: https://pastpens.com/vintage-fountain-pens-gallery/
Sorry this does not work for filtered galleries
Does it works on elementor popup?
Do you mean IN an Elementor Pro popup? If not, what do you mean?
Yes, it should work in a popup just fine.