A simple photo gallery





Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014


A simple photo gallery

Posted on .

I recently did some traveling and, yada yada yada, I ended up with a bunch of photos I wanted to share. I’m not a photographer and have never been a big user of any of the major photo hosting/sharing sites like flickr or smugmug. So I put together a simple photo gallery:

While brainstorming how to I wanted to display these photos for people, I came up with a few requirements:

  • Work on any size screen. I knew many people would view this on their phones/tablets and it needed to be a painless experience or they weren’t going to look at this stuff.
  • Avoid a gallery/slide show presentation, including light boxes. I didn’t want to require a click or tap per photo.
  • Do not use a thumbnail/full size combination. Again, this would require a click or tap (plus more work on my part to generate two copies of each photo).
  • Photos should take up all available screen real estate.

Since the fold is a lie and everyone knows how to scroll, I decided to put all my favorite photos (40 or so) in a single page. Great. But that poses a problem: it’s a terrible idea to fire off 40+ requests for images when a page loads. Luckily, I’d just come across a micro library called echo.js to lazy load images. Echo.js waits to load photos until they’re close to the visible part of the page, which is exactly what I needed. With that, I was pretty much finished.

There are two other minor webby things to point note about the photo page:

  • CSS is used to specify width: 100%; on img tags. This is all it took to meet the last requirement in the list above.
  • I’m using an .svg file with the text “hold tight, pic comin'” as a place holder so I don’t have to worry about my loading placeholder looking pixelated on retina screens (again, important on phones/tablets) or when a browser window is large.

I’m happy with how this turned out, both in terms of presentation and performance. I didn’t get much feedback on the design, but I did receive a number of comments on photos pretty far down on the page so I know people who visited the page took time to look at most if not everything.


Author August Birthstone

Posted at 4:03 am June 14, 2014.

Incredible story there. What occurred after?

My weblog August Birthstone


Author Dorcas

Posted at 2:47 am June 18, 2014.

My web-site – wireless headphones for tv (Dorcas)


Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (2) ...