Charmaine_Surf Posted Thursday at 02:09 AM Share Posted Thursday at 02:09 AM Site URL: http://www.surfmamas.org Hi I am trying to make a gallery at the bottom of my website that shows as three columns on mobile (rather than 2). Also trying to make it where it has a show more show less option for expanding into more photos. Any help is greatly appreciated. Everything I have tried in CSS editor doesn't work . Link to comment
abibacon Posted Thursday at 10:12 AM Share Posted Thursday at 10:12 AM (edited) Hey @Charmaine_Surf, as part of the Curious Coder membership you would have access to a Show More / Show Less button code (see screenshot). This membership is $15 per month and provides access to over 100 code snippets like this, access to a slack community along with 20% discount all the Plugins in the store and occasional webinars. You can cancel the subscription at any point. (Affiliate Link) Edited Thursday at 10:14 AM by abibacon Squarespace Developer based in Hampshire, England If you'd like to make a contribution for my time you can Buy Me A Coffee. Reach out for Custom Coding - abibacon.com Developer & Support Specialist at will-myers.com (Affiliate Link) Link to comment
tuanphan Posted Friday at 01:10 PM Share Posted Friday at 01:10 PM You can use this code to Website Tools > Code Injection > Footer to achieve load more feature <style> button#show-more { display: block; text-align: center; margin: 0 auto; background-color: #000; color: #fff; padding: 10px 20px; border-radius: 50px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('body.homepage figure.gallery-masonry-item').hide(); $('body.homepage figure.gallery-masonry-item').slice(0, 5).show(); $('body.homepage section:has(.gallery-masonry)').after('<button id="show-more">Show More</button>'); $('#show-more').click(function() { $('body.homepage figure.gallery-masonry-item:hidden').slice(0, 5).slideDown(); // autoscroll to refresh page $('html, body').animate({ scrollTop: $(window).scrollTop() + 1 }, 0); $('html, body').animate({ scrollTop: $(window).scrollTop() - 1 }, 0); // if ($('body.homepage figure.gallery-masonry-item:hidden').length === 0) { $(this).hide(); } }); }); </script> You can also consider using a pagination number, similar load more, you can see guide/example here 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment