One of the more important features that I knew I wanted to have ready on the new site ASAP was a "Before and After" slider for images. In architectural and real estate photography, nothing compares to the simple "show-and-tell" approach when conveying the differences between a well crafted image from a hastily taken snapshot. Moreover, when editing is done well, it can be difficult to tell what exactly has been done to an image, even if changes were drastic. Every once in a while someone will tell me, "How difficult can taking a picture of a room be? You just point the camera and press a button!" Sigh, If only it was that simple...

The easiest way to demonstrate these differences would be to simply create a collage showing the 2 images side by side; however, a more elegant way to do this is to overlay 2 images on top of each other and use a slider to reveal changes.

There are various ways to accomplish this in Wordpress. Unfortunately, only 1 way (so far) to do this in Squarespace. Luckily, other people ran into this problem and came up with a clever workaround. I won't go into all the details, but to see step-by-step instructions (including a download link for the code) see Anthony Kramer's post on Mass Exodus' blog.