BearPanther.com

A simple photo gallery

Introduction

user

bear


LATEST POSTS

Using jsformat with Sublime Text 26th July, 2014

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

Blog

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: http://rawr.gr/kenya.

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.

Comments
user

Author August Birthstone

Posted at 4:03 am June 14, 2014.

Incredible story there. What occurred after?
Thanks!

My weblog August Birthstone

Reply
user

Author Dorcas

Posted at 2:47 am June 18, 2014.

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

Reply

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) ...