<!doctype html>
<html>
<head>
<title>Merge Photos - RJM Programming - July, 2017</title>
<script type='text/javascript'>
var widths=[0,0];
var heights=[0,0];
var lefttwo=0, opacity=1.0;
var images=[(location.search.split('image1=')[1] ? decodeURIComponent(location.search.split('image1=')[1].split('&')[0]) : 'IMG_0085.JPG'),(location.search.split('image2=')[1] ? decodeURIComponent(location.search.split('image2=')[1].split('&')[0]) : 'IMG_0086.JPG')];
var image1 = new Image();
image1.onload = function () {
widths[0] = ('' + this.width).replace('px',''); // or 'width' if you want a special/scaled size
lefttwo=widths[0];
heights[0] = ('' + this.height).replace('px',''); // or 'height' if you want a special/scaled size
document.body.innerHTML='<img id="i1" src="' + images[0] + '" style="position:absolute;top:0px;left:0px;width:' + widths[0] + 'px;height:' + heights[0] + 'px;opacity:' + opacity + '"></img><div id="readyfortwo" style="position:absolute;top:0px;left:' + widths[0] + 'px;"></div>';
};
image1.src = images[0];
var image2 = new Image();
image2.onload = function () {
widths[1] = ('' + this.width).replace('px',''); // or 'width' if you want a special/scaled size
heights[1] = ('' + this.height).replace('px',''); // or 'height' if you want a special/scaled size
//document.getElementById('readyfortwo').innerHTML='<img src="' + images[1] + '" style="position:absolute;top:0px;left:' + widths[0] + 'px;width:' + widths[1] + 'px;height:' + heights[1] + 'px;"></img>';
document.body.innerHTML+='<img id="i2" src="' + images[1] + '" style="position:absolute;top:0px;left:' + widths[0] + 'px;width:' + widths[1] + 'px;height:' + heights[1] + 'px;opacity:' + opacity + '"></img>';
};
image2.src = images[1];
function creep() {
if (lefttwo <= eval(widths[0] / 100.0)) {
lefttwo=0;
opacity=0.3;
document.getElementById('i1').style.opacity=opacity;
document.getElementById('i2').style.left=lefttwo + 'px';
document.getElementById('i2').style.opacity=opacity;
} else {
lefttwo-=eval(widths[0] / 100.0);
opacity-=eval(0.7 / 100.0);
document.getElementById('i1').style.opacity=opacity;
document.getElementById('i2').style.left=lefttwo + 'px';
document.getElementById('i2').style.opacity=opacity;
setTimeout(creep, 200);
}
}
</script>
</head>
<body onload='setTimeout(creep,2000);'>
</body>
</html>