Photo Gallery

HTML & CSS
21

For modern browsers you could use css columns for a similar effect although the order is of course ‘column wise’.

2 Likes
22

I’m assuming he’s not a CSS guru.

23

Note to moderator: every time I enter text and hit Reply, I get the popup message: “Unknown error saving post, try again. Error: 502 Bad Gateway”

However, the posts are always posted.

This is using Firefox 37.0.2.

24

Yes, this is forum wide. They are working on it, but it is taking time. You can always cancel the posts when you get that error. The posts HAVE been saved.

1 Like
25

I updated this thread with more info about the 502 errors.

26

I could resize them, but if the normal slot for a photo is 180w X 120h and I take a photo that is 180h x 120w and make it ___w x 120h it would be tiny.

I also could crop, but if it was a picture of the owner who is 6’4", then do I chop him off at the waste just to fit a picture in my awkward web design?

Another option that crossed my mind would be to think of my gallery as one of “thumbnails”, where it is understood that you click on each thumbnail to get a full-sized image.

If I had it so when you click on a smaller photo you get a pop-up window with the full-sized and properly-oriented photo, would that be okay? (I sense that a lot of people hate pop-up windos here on SitePoint.)

27

That looks nice, but I was hoping to understand how to do this myself.

Here is a mockup of what I am facing…

(Actually, when I turn my camera sideway, it makes the portrait photos even longer on the tall side than when you turn it back to portrait, so the sample above isn’t quite as unbalanced as my actual photos, but you get the idea.)

28

Why do it yourself when there are tools premade for you?

If you like the masonry look then by all means go for it :slight_smile: . Easy to use.

29

Take a look at how I dynamically size hundreds of images and only two pages fail the Google Mobility Test. Hope to fix them tomorrow…

30

Because if I can learn how things work it will make me a better developer.

And because I know squat about JavaScript, and this isn’t a good time to learn. (I’d much rather go buy a SitePoint book and snuggle up on the couch on weekends and learn the “right” way versus wham-bam…)

31

Your photo mockup shows that a nice display ideally should: 1. use a one size box for each photo, 2. for each photo show the full size. A possible solution could be to use a smaller anchor box that only shows the image overflow one photo at the time.

If I scale up your mockup photos they range in width from 260 to 380 and in height from 200 to 400 pixels. Largest common display box that always fills would be 260x200 pixels (WxH). Seing the object is in the upper part of the photos, the display box should show the upper center part. Margins let the image center and overflow downwards in the box. The anchor-box hides the overflow, but shows it on mouse hover or touch/tab focus.

Tossed up an example you can try, it uses the proportions from your mockup:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" />
<title>Unnamed Document</title>
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
#gallery{
  margin:0;
    border:solid;
    padding:10px 60px 170px; /* optional extra space the overflow might use */
    overflow:hidden;
  list-style:none;
}
#gallery li{
    position:relative;
    float:left;
  margin:5px;
    border:1px solid;
}
#gallery span{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    padding:2px 5px;
    color:#ff0;
    line-height:1;
}
#gallery a{
    position:relative;
    display:block;
  width:260px;
  height:200px;
    overflow:hidden;
    text-align:center;
}
#gallery a:focus,
#gallery a:hover{
    z-index:1;
    overflow:visible;
}
#gallery img{
  margin:-20px -80px -200px; /* thumbs up to 400px has room to center align */
    border:10px solid #ccc;
    background:#999;
}
</style>
</head><body>

<ul id="gallery">
  <li><a href=""><img src="./images/thumb1.jpg" width="330" height="220"/></a><span>Caption text text text text text text text text 330x220</span></li>
  <li><a href=""><img src="./images/thumb2.jpg" width="340" height="210"/></a><span>Caption 340x210</span></li>
  <li><a href=""><img src="./images/thumb3.jpg" width="330" height="220"/></a><span>Caption 330x220</span></li>
  <li><a href=""><img src="./images/thumb4.jpg" width="300" height="200"/></a><span>Caption 300x200</span></li>
  <li><a href=""><img src="./images/thumb5.jpg" width="380" height="210"/></a><span>Caption 380x210</span></li>
  <li><a href=""><img src="./images/thumb6.jpg" width="260" height="400"/></a><span>Caption 260x400</span></li>
  <li><a href=""><img src="./images/thumb7.jpg" width="340" height="220"/></a><span>Caption 340x220</span></li>
  <li><a href=""><img src="./images/thumb8.jpg" width="330" height="210"/></a><span>Caption 330x210</span></li>
  <li><a href=""><img src="./images/thumb9.jpg" width="350" height="210"/></a><span>Caption 350x210</span></li>
  <li><a href=""><img src="./images/thumb10.jpg" width="270" height="270"/></a><span>Caption 270x270</span></li>
  <li><a href=""><img src="./images/thumb11.jpg" width="280" height="380"/></a><span>Caption 280x380</span></li>
  <li><a href=""><img src="./images/thumb12.jpg" width="260" height="370"/></a><span>Caption 260x370</span></li>
</ul>

</body></html>
32

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.