Easy Elementor Pro Gallery 'View More Images' Design!

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!

Looking for something else? Search across 2445 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

21 Responses

    1. 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.

    1. 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.

      1. 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!

  1. 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.

  2. 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?

      1. This IS the design, view more in the lightbox. This tutorial is NOT for a click to reveal more images, in the current page.

  3. 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

    1. 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);

      1. 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

Leave a Reply