Making a gallery

[SilkSkull]

I'm making a gallery on my site and was wondering what would be a good way to display images? I was thinking an Iframe (if anyone has a resource to learn about those it would be appreciated) but I wanted to ask on here and see if there was a better/easier way? I just assumed Iframe because it would cut down on the length of the page and you wouldn't have to scroll all the way down to see the footer.

[Melooon]

Hmmmm; there are lots of ways of doing galleries and I think there is no right or wrong way! It depends on what kind of images you wanna show, how many images you wanna have and who your audience is!

Do you have 10 or 100 images? Are they artworks, or photography? Do you want people to look at all of them, or just find a few? Do you just wanna show pictures seriously, or do you want it to be more fun and have picture frames and stuff?

iFrames can be good - its cool when you can focus on each picture without being overwhelmed, but it can also be a little claustrophobic and can make it hard to see all the pictures.

Im lazy and usually just dump everything in a list on a page and call it a day  but you can do better!
Hmmm I really need to do my frames tutorial 

[RodFireProductions]

It really depends on the look and functionality you're going for. I made a gallery for my art awhile ago using baguetteBox.js. You can use small thumbnails to not take up space. Clicking on the thumbnails brings up a modal to show the full image. This does require Javascript.

Im lazy and usually just dump everything in a list on a page and call it a day but you can do better!

An alternative to this list method is just dumping it all into a simple grid that auto-adjusts itself to screens. It's the same type of way all the thumbnails in my gallery rest.

Code

.gallery {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
  grid-template-rows: auto;
}

[nymphaeaphoo]

My stubbornness to use JavaScript had lead me to create https://lophius.xyz/gallery, which uses the css target selector to pick out a single artwork the user wants to look at more closely and uses a similar technique to select from multiple variations of each image which is a pretty niche use case.

[tarraxahum]

I had a very particular view of how I wanted my gallery to look, so eventually after a lot of digging I found a good enough script on stockoverflow and adjusted it a bit for my needs. What it gets me are clickable thumbnails and a full image opening up on click, with a description underneath if I put one there, and that's more or less what I wanted to have. So that's one way to do it, I suppose!

Examples of use would go as such and such (since I have two galleries, one for the comic and one for everything else).

View the Code on Codepen.io

[Cele]

OK if I understood correctly...

You can make a scroll box without needing an iframe.

Code

<div style="height:250px;width:600px;border:0px solid #ccc;overflow:auto;">
All the images here
</div>

Of course change the height and width to fit your site. You get a box of a certain size on the page which can be scrolled without needing an iframe, so people don't have to scroll all the way down on the page to see the footer.

[SilkSkull]

The page is up! I'll definitely be considering some of these methods for an update later on but I just wanted to get something out instead of trying to perfect it.