TL;DR -First, go check out the Historic/Now Jackson Ward gallery. See the code for a Google SS backend on Github or get the jquery plugin. Read on for an attempt to detail the search and construction process.

This is an attempt at ridiculous transparency regarding my search path and building process from start to finish. By the end, I’ll provide a working example of a pre/post slider for historical photographs using a Google Spreadsheet to hold the URLs. This post is overkill and will be painful for anyone not suffering from some condition which should be treated medically.

The Search

Friday, March 14, 10:30 (ish) PM

I read Erin White’s¹ THAT Camp proposal about capturing modern images to parallel VCU’s Jackson Ward collection.

Eric Johnson’s comment about the Washington Post’s then/now slider got me wondering if I could figure out how that worked and set up something decent prior to Saturday’s sessions.

cc licensed ( BY SA ) flickr photo shared by Tom Woodward The search graphic

Search #1 – 10:40 PM – javascript slide between photographs

I immediately start finding slide show focused pages. So I realize I’m not searching with the right words after about seven sites and around 60 seconds.

Search #2 – 10:41 PM – washington post then and now

I figure I’ll go see what I can find in the actual page source that Eric references. This is probably where I should have started. After looking around the source, I find a few javascript references which happen to have “wp” in the titles.

Search #3 – 10:42 PM – wp slider

My brain has been trained to associate “wp” with WordPress rather than associating it with, say, the Washington Post. This led me down a false WordPress trail for a while.

10:42-11:10 PM

I then spend quite a bit of time trying to piece together the way the Washington Post does things. My pattern really consists of trying to parse out the relevant CSS and javascripts to make a working demo. With a lot of these more complex CMS driven pages, that proves to me more trouble than it’s worth. After 30 minutes of mixed searching and building, I decide this is not fruitful.

Search #4 – 11:10 PM – manual image slider javascript

This search, too, yields mainly slide show type results. I spent a bit more time looking at these in an attempt to see if I couldn’t think of way to use what I saw in a non-standard manner to achieve the same result.

Search #5 – 11:13 PM – javascript tutorial slider compare photos washington post

I was hoping someone would be associating the Washington Post with this technique (like Eric did) and had created a tutorial for it or maybe asked someone to make that kind of tutorial. Slide keeps pulling things I don’t want.

Search #6 – 11:18 PM – jquery tools overlay mask image

Since “slider” keeps pulling things I don’t want, I start trying to think of other words that might make sense. I’m also getting more specific and looking at “jquery” rather than the more generic “javascript”. Masking turns out to be a more all-or-nothing process so dead end there.

Search #7 – 11:20 PM – jquery examples scrub

Scrub was a bit of a reach but it does refer to dragging a playhead along a timeline but doesn’t get me anything close to what I want. The change to “examples” was also meant to open up the search beyond tutorials or tools.

Search #8 – 11:20 PM – jquery toggle between two images

Toggle did get me examples that would let me switch between two images but it was an all or nothing proposition and driven by a click rather than a slider.

Winner – Search #9 – 11:20 PM – compare historical photos jquery

I decide to reconsider my vocabulary and use something more like I think a normal human might say. I keep the jquery term so that I’m not swamped with millions of results. Simple and the winner. It leads me to Stackoverflow and from that the answer.

Reflection

I’ve never looked at one of my search paths like this before. It’s a pain to try to pull together but I think it’s been fairly informative. I’m looking at making this faster and better. Seems like a Chrome extension of some sort would be a really advantageous way to do this. It’s all in a database so it seems like it’d be relatively easy.

Construction

Demo – 11:20 PM Friday

The tutorial works just as advertised. I had a demo up in about 3 minutes. You can view source to see how it’s set up. I didn’t initially recognize the need to number both the function and div id when you have multiple images.

Google Spreadsheet Feeder – Start to Finish about 2 hours

It would have been very easy to run this off a database or text files but I thought that tying it to a Google Spreadsheet would make it easier for the group to add their photos. Since I had Timmy’s template for that, it seemed very doable. This is why you want to keep your old work (or old borrowed work) hand and well commented. These things inevitably come back up and you don’t have to start from scratch.

The script below adds numbers to the script for each image added in the Google Spreadsheet.²

The basic loop cycle builds out the pre/post images. You can see the whole thing on Github. Sharing is caring, even if you don’t quite now what you’re doing.

It’s wrapped with some Bootstrap CSS for minor formatting but could probably use a more concentrated effort at improving the layout.

The main portion that I never got straight was the loop count between the portion that adds the numbers for the javascript and the portion that adds the numbers for the div. They start differently. The javascript portion starts with number two and moves from there but the div portion pulls the data from the first row of the spreadsheet. I don’t know why. In the end, I grew frustrated and brute forced a solution. I hard coded an initial element into the javascript portion and erased the headers on the Google Spreadsheet. That solved the problem but I intend to find out what the deal is there at some point.