Photo Corners

A   S C R A P B O O K   O F   S O L U T I O N S   F O R   T H E   P H O T O G R A P H E R

Enhancing the enjoyment of taking pictures with news that matters, features that entertain and images that delight. Published frequently.

Adding Sliding Images To Your Web Site Share This on LinkedIn   Share This on Google   Tweet This   Forward This

23 May 2014

We spent more than a few days trying to decide how to display our Lensbaby Fisheye images. We presumed a gallery format would be best. You know, present a page full of thumbnails you could click for a higher resolution image. We presumed wrong.


There are many ways to create a gallery page, if it suits you. But we went to the trouble of writing our own once upon a time that has been used for the galleries and carrier pages (as it calls them) at Imaging Resource. We revisted that code to see if it would suit the fisheye images but decided 1) it was too specific to the needs of that client and 2) it was archaic.

Obviously we don't believe in the trend to write short and heavily illustrate. We go the other way. Be concise but thorough and illustrate pointedly. Nobody has time for your nonsense.

Obviously we don't believe in the trend to write short and heavily illustrate.

And galleries are nonsense. (Another reason why our Behance review is taking so long.)

But they are particularly bad when it comes to showing the fine detail of a fisheye capture in a 250-pixel image. Everything looks like a marble.

So we abandoned that idea. Abandoning ideas does not come naturally to us, so it took a few days.


When our resistance had worn down we remembered some code we'd stashed away. Stashing code away for a rainy day is part of our DNA and not just us. Storehouse founder Mark Kawano, a senior designer at Apple for seven years, describes a similar process at Apple that resulted in the shaking text field when you enter the wrong password.

We had stashed away CSS Slidy, a Javascript project by Dudley Storey. He had just released an update to the code we had experimented with, detailing it in CSS Slidy 2.0: Captions & more. While v1.5 worked fine, v2.0 let us roll up our sleeves to solve our presentation problem.

If you want to do this on your own site, you might prefer to use the arrangement he describes in CSSslidy: An Auto-Generated Responsive CSS3 Image Slider, an earlier release, which explains a bit better where to put what on the page. We won't detail all that here, but you can see what we did for our review by looking at the source code.

One thing Storey recommended is to minimize the code to save space. On publication, we half did that, cutting out the comments and indents. We had trouble finding a minify service that didn't break the code. But then we did: Online Javascript Compression Tool. So we updated the review with the minimized code.


We did make one addition to Storey's code. We didn't want as big a font size as Storey used because we wanted to keep the text in the uninteresting corner of the fisheye images. But using a smaller text size in a normal weight font wasn't very legible.

So we added a font-weight variable so we could display our caption in bold. That also made it feasible to use the site's highlight color (teal) in the captions. We always like extending the brand.

To do this, just add the variable captionFontWeight:"bold", on a line of its own under captionFont and then insert "; font-weight: "+t.captionFontWeight+ after t.captionFont+.

Or just copy our minimized code from the review. Weight can be "bold" or "normal."

And while you're at it, play around with the other variables at the top of the code to wrangle your own unique style to the display. It's fun (and leads to trouble).


So what did we like about this approach?

  • First, it let us display the square images at 500 pixels, which was large enough to show the detail we felt you needed to see.
  • Second, it let us use the same display space on the Web page to show you a number of images. We cut it down to eight representative ones, leaving out some of our favorites (and, unfortunately, all of our interiors, which we hope to remedy one of these days).
  • Third, you don't have to do anything but sit back and watch all the images, not just a few intriguing thumbnails you popped open), slide into view. We did extend viewing time from three seconds to four because there's a lot to look at in a fisheye capture.
  • Fourth, we could use the caption to indicate progress ("Image 2 of 8," for example).

Downsides? Just a couple that we can think of. It isn't obvious that you can 1) tab to toggle the caption display and 2) grab an image by right clicking on it. So we added those instructions to the show's caption. So no downsides.

Which is how we like things around here.

BackBack to Photo Corners