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)

1 Like
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

10

Thanks for sharing.
I tried to implement this and when I copy and paste to my page (whole container) it has only one column.
Can you please advise in a ‘noob friendly’ way what I need to adjust?

Thanks a lot

11

Hi.
nanogallery2 looks great.

Can you please point me on docs how to implement this to a bootstrap studio template/webpage?
I can think of 2 possible options here:

  1. use some plugin in the studio (although I did not find ‘plugins’ so far)
  2. it’s not done in bootstrap studio and requires some external editor

sorry for stupid question. I’m just starting out with webpages.

Thanks

12

Have you copied the CSS and JavaScript files over to your design?

13

Thanks for the hint.

I copied styles.css and now it works (other CSSs were present as I played with inbuilt galleries).

Can you please advise on something else?

  • I’ve hidden “paragraph” so it will look better and now the images are stacked right after another in the column, but there is a space between columns. Is there a way to set same spacing on rows and columns? (I understand it’s not actually a row, but below the pictures)
  • When I start a preview and ‘open’ a picture, I see “Image caption” below the image. I tried to rename it in the paragraph and hide it or leave it shown, but the text is still “Image caption”. Do you know how to change that?

Thank you,

Juraj