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