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.

image.thumb.png.1588109ae005b1e3b2ea755aa6bb7b6c.png

 

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.

image.thumb.png.c32fa5a92bcae330d062296c3919090e.png

 

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.

image.thumb.png.f7841067c4e33ae791ca7f7a642f79e1.png

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.

image.thumb.png.129437cf7db8a72d50a3692ed9f88631.png

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. 

Thanks,

Melody

Edited by melody495

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

Melody
💁‍♀️ 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.

#neverstoplearning
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.