Partially collapse a gallery section, expand with button

Password: Floor4700a5inc

Hello, is it possible to make a function "load more" button to expand a gallery section and reveal more images?
I have a gallery section with the universal filter already working. I'd like to keep the initial amount of image tiles to around 10-14, but allow for the filter to pull hidden images, and a "see more" or "load more" button expand the section to show all or show 14 more...etc. I currently have a fake button just for mockup sake.

Good example of this on this website's gallery: https://www.ryancompanies.com/projects

Has anyone seen anything like this in Squarespace? Is this possible at all to do with a gallery section?

Hi,

Universal Filter has a pagination option, you can check documentation page

Hi @tuanphan!

I'd like to do something similar to this Gallery page: etchwood.com/gallery

Which part of the code above should I use if you don't mind sharing?

On 4/11/2024 at 12:58 AM, Justin G said:

Hi @tuanphan!

I'd like to do something similar to this Gallery page: etchwood.com/gallery

Which part of the code above should I use if you don't mind sharing?

(1) You added Filter Plugin and you need to add Load More button?
Or (2) you still haven't added any plugins, and you need to add Load more button under Gallery Images on /gallery page?

If (2), you can add a button block under, next add one more section under, I will use code to hide this section, and when users click on button >> show this section.

What do you think?

(Each case will have a different code so I don't have code to share now, need to check code)

@tuanphan Thanks for getting back with me. I don't have a plug-in on the Gallery page. A "Load More Images" link or button would be great instead of a never-ending stream of images. So, option 2 sounds like the way to go.

Thanks!

On 4/17/2024 at 11:28 PM, Justin G said:

@tuanphan Thanks for getting back with me. I don't have a plug-in on the Gallery page. A "Load More Images" link or button would be great instead of a never-ending stream of images. So, option 2 sounds like the way to go.

Thanks!

I tried doing a quick demo, you can check

https://tuanphan-demo01.squarespace.com/cbutton-show-section?noredirect

pass: abc

I like that. 

Can I add that to my current Gallery page?

On 4/23/2024 at 4:24 AM, Justin G said:

I like that. 

Can I add that to my current Gallery page?

(1) First, add a button under current Gallery > Paste this url to button

#load-more

make sure "Open in new tab" option is disabled.

(2) Next, add a Gallery Section under button

(3) Use this free tool to find ID of this new Gallery Section

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

(4) Use this code to Code Injection Footer (or Page Header Code Injection, page where you use Gallery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){  
  // Load More
  $('a[href="#load-more"]').click(function(){
    $(this).remove();
    $('section[data-section-id="6622374a4dccb83613051b22"]').addClass("show");
    $('section:not([data-section-id="6622374a4dccb83613051b22"])').removeClass('show');
    }
  );
});
</script>
<style>
section[data-section-id="6622374a4dccb83613051b22"] {
    display: none;
  transition: all 0.5s;
}
  section.show {
      display: block !important;
    transition: all 0.5s;
  }
</style>

replace with your gallery section id

I apologize for not seeing this sooner! For some reason, I didn't receive a notification of a reply. I'll give it a go soon. I'll let you know how it goes. Thank you for being so helpful @tuanphan!