Image gallery with thumbnails

Ok folks,

I would like an image gallery simple with thumbnails like the one provided by the app

but I would like small thumbnails, I would like to adjust the size of the thumbnails

is there a way to acheive that or to mimic an image gallery with thumbnails ?

Bonjour @xoxixox :wave:t2:

There isn’t a direct setting to adjust the size of the thumbnails in an image gallery, but you can control it by adjusting the number of thumbnails displayed and the margin between them. The more thumbnails you display and the larger the margin, the smaller the thumbnails will appear.

Yes I saw that, but if I have let’s say 4 images the thumbnails are huge !!

If you increase the margin, the thumbnails will become smaller.

Otherwise, another solution would be to recreate a system similar to image galleries but using popups. This will allow you to adjust the thumbnail size precisely, just the way you want. Here’s an example:

Gallery Popups.sitely (400 KB)

Thanks Allan,

increasing the margin is not a option for me (too ugly) but your example is cool, I just modified it a bit and here is the result : http://www.xoxixox.com/Sitely/GalleryPopups2.sitely

right click and save as

I like the effect I put on the thumbnails but I would like (to try) an effect that fade in/out a bit the thumbnail on mouse Hover. Do you have an idea how to acheive that ?

The shifting issue comes from the scrollbar on the right side. You can fix it by going to Site Settings > Misc > Always show vertical scrollbar.

To fade the thumbnails, simply add transparency to the Background thumbnail boxes and adjust the layers so the thumbnails are placed under the popups, allowing the Background thumbnail boxes to overlay them.

Unfortunately, this technique causes the popups to sit on top, which makes the underlying thumbnails unclickable. If that’s important, there are also workarounds to bypass this limitation.

https://made-with-sitely.com/share/gallery-popups/GalleryPopups3.sitely

1 Like

Thank you, I will dig around to see what effect I can achieve :+1:

1 Like