Helping KFOR.com; Using jQuery to transition between ‘before’ and ‘after’ images

It’s been a wild week at work helping KFOR.com in Oklahoma City cover the Moore, Oklahoma tornado.

One interesting thing I built today was a spin on images I saw after Hurricane Sandy – where (I think) the New York Times took ‘before’ and ‘after’ satellite photos and used a slider to let users compare images.

When I saw Google’s new imagery of the tornado area I knew I had to build something similar, and I wanted to do it before anyone else in the media did.

So it was off to stack overflow and some other places to figure it out – I knew I wanted to use jQuery, so that was an easy place to start.

Pretty quickly I found a way to do it, and it was even a WordPress plugin, but that would have taken some work get up and running on WordPress VIP, so I decided that using code and running the images in an iFrame would be best.

With that, I found Classy Compare - within a few minutes I had the HTML together and pulled some images to use, and the resulting project came together quite nicely and has been well received by our audience – you can check it out here:

Interactive Images:  Moore Tornado before and after on KFOR.com

Screen Shot 2013-05-23 at 8.22.16 PM