{"id":263,"date":"2011-03-21T17:43:59","date_gmt":"2011-03-21T17:43:59","guid":{"rendered":"http:\/\/mappinglondon.blogs.splintdev.geog.ucl.ac.uk\/?p=263"},"modified":"2014-02-05T12:47:55","modified_gmt":"2014-02-05T11:47:55","slug":"beforeafter-aerial-photos-of-london","status":"publish","type":"post","link":"https:\/\/mappinglondon.co.uk\/2011\/beforeafter-aerial-photos-of-london\/","title":{"rendered":"Before\/After Aerial Photos of London"},"content":{"rendered":"<p>Using the visualisation technique used by ABC Australia and the New York Times to show before\/after photographs of the impact of the Japan Tsunami, below are before\/after photographs of four areas in London which have seen dramatic change in the last ten years. Pass your mouse over each image to move the divider bar. Can you recognise the four places?<\/p>\n<p>The aerial imagery is from Google Earth and is copyright Bluesky. The &#8220;before&#8221; pictures are generally from 2002-6 and the &#8220;after&#8221; pictures are from the recent (June 2010) update.<\/p>\n<style type='text\/css'>\n.imageholder { position: relative; margin: 0 auto; width: 640px; height: 320px; margin-bottom: 10px; }\n.before, .after {height: 320px; position: absolute; top: 0; }\n.before { width: 320px; }\n.after { width: 640px; }\n.slider { position: absolute; width: 6px; height: 320px; background-color: blue; left: 317px; opacity: 0.5; filter:alpha(opacity=50); }\n#before1 { background-image: url('\/wp-content\/uploads\/2011\/03\/ba_stpancras_before.jpg'); }\n#after1 { background-image: url('\/wp-content\/uploads\/2011\/03\/ba_stpancras_after.jpg'); }\n#before2 { background-image: url('\/wp-content\/uploads\/2011\/03\/ba_olympic_before.jpg'); }\n#after2 { background-image: url('\/wp-content\/uploads\/2011\/03\/ba_olympic_after.jpg'); }\n#before3 { background-image: url('\/wp-content\/uploads\/2011\/03\/ba_westfield_before.jpg'); }\n#after3 { background-image: url('\/wp-content\/uploads\/2011\/03\/ba_westfield_after.jpg'); }\n#before4 { background-image: url('\/wp-content\/uploads\/2011\/03\/ba_shoreditch_before.jpg'); }\n#after4 { background-image: url('\/wp-content\/uploads\/2011\/03\/ba_shoreditch_after.jpg'); }\n<\/style>\n<p><script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.5.1.min.js\"><\/script><br \/>\n<script type='text\/javascript'>\njQuery(document).ready(function(){\n\tjQuery(\"#imageholder1\").mousemove(function(e){\n\t\tvar x = e.pageX - this.offsetParent.offsetLeft - this.offsetLeft;\n\t\tvar y = e.pageY - this.offsetTop;\n\t\tif (x <= 640) \n                {  if (x >= 0) \n\t\t  {\n\t\t\tvar offset = x - 3;\n\t\t\tjQuery(\"#slider1\").css('left',offset);\n\t\t\tjQuery(\"#before1\").css('width',x);\n\t\t}\n              }\n\t});\njQuery(\"#imageholder2\").mousemove(function(e){\n\t\tvar x = e.pageX - this.offsetParent.offsetLeft - this.offsetLeft;\n\t\tvar y = e.pageY - this.offsetTop;\n\t\tif (x <= 640) \n                {  if (x >= 0) \n\t\t  {\n\t\t\tvar offset = x - 3;\n\t\t\tjQuery(\"#slider2\").css('left',offset);\n\t\t\tjQuery(\"#before2\").css('width',x);\n\t\t}\n              }\n\t});\njQuery(\"#imageholder3\").mousemove(function(e){\n\t\tvar x = e.pageX - this.offsetParent.offsetLeft - this.offsetLeft;\n\t\tvar y = e.pageY - this.offsetTop;\n\t\tif (x <= 640) \n                {  if (x >= 0) \n\t\t  {\n\t\t\tvar offset = x - 3;\n\t\t\tjQuery(\"#slider3\").css('left',offset);\n\t\t\tjQuery(\"#before3\").css('width',x);\n\t\t}\n              }\n\t});\njQuery(\"#imageholder4\").mousemove(function(e){\n\t\tvar x = e.pageX - this.offsetParent.offsetLeft - this.offsetLeft;\n\t\tvar y = e.pageY - this.offsetTop;\n\t\tif (x <= 640) \n                {  if (x >= 0) \n\t\t  {\n\t\t\tvar offset = x - 3;\n\t\t\tjQuery(\"#slider4\").css('left',offset);\n\t\t\tjQuery(\"#before4\").css('width',x);\n\t\t}\n              }\n\t});\n})\n<\/script><\/p>\n<div id=\"imageholder1\" class=\"imageholder\">\n<div id=\"after1\" class=\"after\"><\/div>\n<div id=\"before1\" class=\"before\"><\/div>\n<div id=\"slider1\" class=\"slider\"><\/div>\n<\/div>\n<div id=\"imageholder2\" class=\"imageholder\">\n<div id=\"after2\" class=\"after\"><\/div>\n<div id=\"before2\" class=\"before\"><\/div>\n<div id=\"slider2\" class=\"slider\"><\/div>\n<\/div>\n<div id=\"imageholder3\" class=\"imageholder\">\n<div id=\"after3\" class=\"after\"><\/div>\n<div id=\"before3\" class=\"before\"><\/div>\n<div id=\"slider3\" class=\"slider\"><\/div>\n<\/div>\n<div id=\"imageholder4\" class=\"imageholder\">\n<div id=\"after4\" class=\"after\"><\/div>\n<div id=\"before4\" class=\"before\"><\/div>\n<div id=\"slider4\" class=\"slider\"><\/div>\n<\/div>\n<p><a href=\"http:\/\/oobrien.com\/2011\/03\/the-changing-london-olympic-park-2006-to-2010\/\">More on the split-screens in my research blog<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using the visualisation technique used by ABC Australia and the New York Times to show before\/after photographs of the impact of the Japan Tsunami, below<\/p>\n","protected":false},"author":1,"featured_media":353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-historic"],"_links":{"self":[{"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":6,"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/posts\/263\/revisions"}],"predecessor-version":[{"id":2890,"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/posts\/263\/revisions\/2890"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/media\/353"}],"wp:attachment":[{"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/media?parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/categories?post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mappinglondon.co.uk\/wp-json\/wp\/v2\/tags?post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}