Advice needed -Photo gallery

Webdesign Help
1

I have a dilemma, the best way to showcase images. Two factors, first large exhibition sets, 20 to 62 images in each project, second not all images are the same format (aspect ratio, as well as landscape/portrait)

If the images were the same size it’s easy in a Lightbox Gallery. Essentially I shoot film,I don’t crop ao aspect rations are square 6x6, panoramic 6x17, and 5x4 (&10x8). I need to keep to the original sequencing. Any suggestions would be really helpful.

Ian

2

How about something like this?

Rather than using the masonry javascript recommended by bootstrap it just uses the following CSS:

.masonry-gallery {
  columns: 250px;  /* 200px = 5 cols  || 250px = 4 cols || 300px = 3 cols  450px = 2 cols*/ 
  gap: clamp(1rem,5vmin, 2rem);
  width: 98%;
  margin: 1rem auto;
}

.masonry-gallery a {
  text-decoration: none;
}

.masonry-gallery a:hover img {
  filter: invert(10%);
}

.masonry-gallery p {
  text-align: center;
  background: var(--bs-dark);
  color: var(--bs-light);
  padding-block: .4rem;
}
3

Thanks, I can see there’s some daylight here, I think I’d need to add a numbering sequence, with a title, as the page you are suggesting is reading down the images from the first column, then to the second, rather than from left to right. I don’t see that as a problem though. I had been working on a six column Bootstrap Lightbox Gallery, but a 3 column gallery is far better.

My major issue is age, it’s 57 years since I learnt. And I may need to asked more detailed Fortran 4, and 31 years since I first used Netscape to write a website, So any / all help is greatly appreciated, but I may need to ask seemingly basic questions.

Ian

4

I have updated the example to include image captions, and also updated the css in my original reply

You can change the first line of the css:

  columns: 200px;

200px = 5 cols || 250px = 4 cols || 300px = 3 cols 450px = 2 cols

5

Just what I need with a few tweaks, thank you. Now I need to work out how to implement it :smiley:

Ian

6

If you need the bss file it is available here:

7

Great, thanks again,now I just need to finish tweaking slightly to match the colour scheme, font sizes, etc, of the rest of my new website. I’ve nearly finished.

Ian

8

I like NanoGallery2 (though it does require jQuery)

9

Thanks, I had a look at nano gallery, maybe a little to complex for me, but looks excellent. The suggestion richards has posted here is exactly what I was looking for, it’s simple enough for a septuagenarian (well only just 4 days ago) to understand, and I’ve already customised it to work in the upgrade to my website design. :smiley:

richards has come up with an excellent hybrid Gallery using mason-gallery & lightbox.

Ian