fletch77 Posted April 3 Share Posted April 3 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? Earvin 1 Link to comment
tuanphan Posted April 5 Share Posted April 5 Hi, Universal Filter has a pagination option, you can check documentation page Earvin 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Justin G Posted April 10 Share Posted April 10 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? Link to comment
tuanphan Posted April 13 Share Posted April 13 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) Earvin 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Justin G Posted April 17 Share Posted April 17 @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! Link to comment
tuanphan Posted April 19 Share Posted April 19 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 Earvin and Justin G 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Justin G Posted April 22 Share Posted April 22 I like that. Can I add that to my current Gallery page? Link to comment
tuanphan Posted April 25 Share Posted April 25 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Justin G Posted April 30 Share Posted April 30 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! Earvin and tuanphan 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment