Rightmove - Then & Now

Then & Now is an interactive one page app that merges World War 1 photos with Google Street View imagery of today.

Once all the main images have loaded, and a brief introduction has been read, you can start to explore the thirteen different locations.

The user can drag the highlighter in the middle to compare ‘Then & Now’. Doing so affects the width of the WW1 photo’s container.

One of the requirements for the piece was that a user should be able to share individual locations, so I utilised the history API and pushstates to update the URL with the location’s ID whenever the scene is changed. Each scene has it’s own set of social sharing buttons to share it’s dynamic URL, then on page load I check to see if a hash is present on the URL, and that it is a number between one and thirteen, then use the value of the hash to load the correlating scene. I also used a popstate function to allow the back & forward browser buttons to be used to navigate the piece.

When sharing via Facebook, thirteen separate HTML pages have been set up so that each location could have it’s own set of Open Graph tags, and a unique og:image.

The site is fully responsive down to mobile.

For the drag functionality I used Modernizr to detect whether a touch device is being used to access the site so that I could set the events accordingly.

if (Modernizr.touch) {  
    // Set touch events
} else {  
    // Set click events
}

For non touch devices, on mousedown I set a mousemove function on the document, and then pass the eventData into a function to calculate the width to set the old photo to. Then on mouseup I remove the event handler.

$('.drag').mousedown(function(e) {
    e.preventDefault();
    $(document).on('mousemove', function(e) {
        e.preventDefault();
        main.resize(e);              
    });
    $('body').mouseup(function() {
        $(document).off("mousemove");
    }); 
});

Likewise for touch devices I did pretty much the same thing, but using touchstart and touchmove events instead.

$('.drag').on('touchstart', function(e) {
    document.addEventListener('touchmove', function(e) {
        e.preventDefault();
        var touch = e.touches[0];
        main.resize(touch);              
    }, false);            
}).on('touchend', function(e) {
    document.removeEventListener('touchmove');
});