Before-after.md

The climate change before & after feature has some issues with its javascript. It's reloading alternate versions javascript libraries that are already loaded as part of the main page and it's reloading them multiple times. Please update as follows.

First, remove this from every renderHTML component:

<script type="text/javascript" src="http://www.slate.com/content/dam/slate/blogs/browbeat/2013/02/erase-test_natalie/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.slate.com/content/dam/slate/blogs/browbeat/2013/02/erase-test_natalie/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="http://www.slate.com/content/dam/slate/blogs/browbeat/2013/02/erase-test_natalie/jquery.beforeafter-1.3.min.js"></script>

The page already loads jQuery and jQuery-UI. The page doesn't load the jquery.beforeafter plugin, but we'll do that in a way that works with the jQuery scripts on the page.

Also get rid of this line in each component. It's superfluous.

	$('#container').beforeAfter({imagePath:'js/'});

The new code for each component should look like this. (Replace the number for each container as appropriate):

<script type="text/javascript">
requirejs(['jquery','jqueryui',
           "http://www.slate.com/content/dam/slate/blogs/browbeat/2013/02/erase-test_natalie/jquery.beforeafter-1.3.min.js"], 
function($,ui,before) {
  $(function(){
    $('#container2').beforeAfter({imagePath:'js/'});
  });
});

if( self == top ) {
  document.documentElement.style.display = 'block' ; 
} else {
  top.location = self.location ; 
}
</script>


<style type="text/css">
#contentfortest2 {
	margin:0 auto;
	width:590px;
}
</style>


<div id="contentfortest2">
<div id="container2">
	<div><img alt="before" src="http://www.slate.com/content/dam/slate/articles/technology/future_tense/2014/05/waterlevels/140519_FUTURE_Harvard-0-feet.jpg" width="590" height="393" /></div>
	<div><img alt="after" src="http://www.slate.com/content/dam/slate/articles/technology/future_tense/2014/05/waterlevels/140519_FUTURE_Harvard-12-Feet.jpg" width="590" height="393" /></div>
</div>
</div>

If you upload the Touch Punch plugin to the same area of the DAM as the beforeafter plugin, update the first bit of the script so that it loads that library as well. It'd look like this:

requirejs(['jquery','jqueryui',
           "http://www.slate.com/content/dam/slate/blogs/browbeat/2013/02/erase-test_natalie/jquery.beforeafter-1.3.min.js",
           "http://www.slate.com/content/dam/slate/blogs/browbeat/2013/02/erase-test_natalie/jquery.ui.touch-punch.min.js"], 
function($,ui,before,touchpunch) {
  $(function(){
    $('#container2').beforeAfter({imagePath:'js/'});
  });
});