Easy Elementor Pro Gallery 'View More Images' Design!
Get Premium

Easy Elementor Pro Gallery 'View More Images' Design!

Just Released: 10 Popular Web Hosts Tested In Depth

WordPress Hosting Review

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.

Here is what we will be creating:

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.

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> 
/* Please login to get the code 
 * The code will be for the Easy Elementor Pro Gallery 'View More Images' Design! tutorial 
 * Found at this URL https://element.how/elementor-pro-gallery-view-more-images/ 
 */ 
</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!

WordPress Hosting Review

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

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

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

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

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

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

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

      2. This tutorial is for Elementor Pro gallery element, not smart grid AE ACF Gallery,

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

  12. Hey Maxime,

    Thanks for the time putting this together for us. It's great idea, however if you care about your PageSpeed Insights score, it's probably one to avoid as it creates a large CLS - Cumulative Layout Shift issue as it loads all images at first, then it cuts it back to your set limit which moves things around in your viewport.

    So is there a way that you could achieve the same result, but without loading all images, then showing only the limited images? Without CLS?

    Cheers, Jo

    1. Hey Joe!

      The CLS issue is only relevant if you have this above the fold... which isn't really a good idea to start with.

      It will negatively affect your speed scores, regardless of if you use my code or not, if you have this above the fold.

      If you have this below the fold, it's not a problem anymore.

      Cheers!

      1. Hey Maxime,

        I'm trying to create something similar this: https://ibb.co/xXdy4Lp

        Usually seen on real estate websites, basically an image gallery that would show the first couple of images with 'more images' or a number remaining, or basically exactly what your tutorial is about, however yes this gallery is at the top of the page, it is above the fold.

        Any idea if something like this could be achieved with the native Elementor widgets, possibly without CLS?

        Cheers, Jo

      2. Hey Joe,

        Yes I think it's possible, but not without any CLS, no. It's not even related to my code really... It's the way that element loads. It's all loading from Elementor's JS and is really suboptimal, CLS wise.

        If you want something that has a chance at having a low CLS you will want to look at the Basic Gallery element, modifying that one to have the grid layout you need, and then adjusting my code here for that element for the "view more" functionality.

        Cheers!

  13. Hey Maxine, is it possible to show only a limited number of images using the Elementor gallery? I want to use a gallery on my loop, but I have too many pictures for some listings. Thank you!

      1. Thanks for your response. However, I just want a limited number of images without the view more button

      2. In that case it's simple. Here is how you do it:

        You have two galleries in your CPT, not one. One of them is for the loop template, and one of them is for the single post template.

        You then add just the images you need and want in the loop template gallery.

        Cheers!

Leave a Reply

Easy Elementor Pro Gallery 'View More Images' Design!

Resources

Premium

Account

Discounts

Facebook Youtube Envelope

© Copyright 2023 Element How
Privacy Policy | Terms & Conditions