Jump to content

Gallery Navigation with Numbers AND Ellipsis

Recommended Posts

Site URL: https://www.benjaminhope.net/ingredients-gallery-brine

I'm using 7.0 Brine with a gallery. This question is about customising the navigation options.

If I choose "Numbers" then every single image is represented (i.e. if there are 221 images in the gallery then there are 221 numbers displayed in the navigation). This looks ridiculous so at present I am forced to use either "Simple" or "None".

What I would like, though, is a small set of numbers (say three) from the start and end of the sequence to appear with ellipsis to represent those in between—i.e. something like those in the attached image. Then as the user clicks through, these would change accordingly. You know the kind of thing—it's been used in website galleries for years.

Is there any way of achieving this?

Thanks in advance

Benjamin

 

pagination-bars-web-buttons-vector-260nw-1109857919.jpg

Link to comment
  • 1 month later...
On 9/15/2021 at 12:36 PM, benhopeartist said:

Site URL: https://www.benjaminhope.net/ingredients-gallery-brine

I'm using 7.0 Brine with a gallery. This question is about customising the navigation options.

If I choose "Numbers" then every single image is represented (i.e. if there are 221 images in the gallery then there are 221 numbers displayed in the navigation). This looks ridiculous so at present I am forced to use either "Simple" or "None".

What I would like, though, is a small set of numbers (say three) from the start and end of the sequence to appear with ellipsis to represent those in between—i.e. something like those in the attached image. Then as the user clicks through, these would change accordingly. You know the kind of thing—it's been used in website galleries for years.

Is there any way of achieving this?

Thanks in advance

Benjamin

 

pagination-bars-web-buttons-vector-260nw-1109857919.jpg

This exactly what's this plugin would provide

Pagination | TOAST UI :: Make Your Web Delicious!

You may need javascript or hire someone who does to implement this

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.