Jump to content

"Load More" images in gallery section 7.1 and/or gallery block 7.0

Recommended Posts

Hi, I'm trying to add a "Load More" to only show x images initially, then click to show the next x images and so on. I have the Lazy Summaries Load, this would have worked with gallery page in a summary block, however I have a 7.1 site, and it doesn't have gallery pages anymore. So that is not an option. I have also tried a workaround to use blog for my images, then summary block. But the lightbox on Lazy Summaries Load only show for the loaded items, I want lightboxes for the entire collection, even if the rest has been lazy load/load more.

I have tried some code, however I don't really know what SS is doing behind the scenes, hoping someone can shed some light?

Here is what I am trying to reproduce: https://maximillianwilliam.com/artist/reginald-sylvester-ii/ Scroll down to selected works.

Here is my site:https://tuatara-cello-3kr6.squarespace.com/config/

Password: wpGNeG9jZ5diGiM

What I have working now, hiding the rest of the gallery items.



The issue, when I click LOAD MORE, the rest of the items show but it's all messed up. It looks extra weird with a white horizontal bar because that is an empty section sitting in front of the images.



What I've tried:

display: none;

This works in hiding the ones I don't want to show yet, and page layout looks fine.

The issue: SS sets the height of the wrapper container and set transform for its children, is there a way to trigger this to recalculate? See below

This is SS before any code. Wrapper height cover all it's children.


This is SS after code to set 6 items to 

 display: none

& added class name "notloaded". The transform values are already messed up for these 6 items. Wrapper height container is set to cover only the children that are shown.


I've tried varies "unset" display: block/flex/unset, to reveal those hidden items, but the wrapper height stays the same (too small), and the children's transform value doesn't change => they overlap each other.

Any pointers much appreciated. 



Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

💁‍♀️ SquareSpace Developer
You dream it, I'll make it happen.

Contact me:
💻 https://www.melodylee.tech

✉️ my email
📍 UK based. The great thing about the internet, we can work together from anywhere.

I like coffee 😊

Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.