Jump to content

Three Row Gallery with a show more show less at bottom of page

Recommended Posts

  • Replies 2
  • Views 79
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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)

 

Screenshot 2024-10-31 at 10.14.14.png

Edited 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

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

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.