mauron85/imgcompare.html

## imgcompare.html
<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		* {
			box-sizing: border-box;
		}

		html,
		body {
			margin: 0;
			background: black;
		}

		.img-comp-container {
			position: relative;
			/* height: 200px; */
			/*should be the same height as the images*/
		}

		.img-comp-img {
			position: absolute;
			width: auto;
			height: auto;
			overflow: hidden;
		}

		.img-comp-img img {
			display: block;
			vertical-align: middle;
		}

		.img-comp-slider {
			position: absolute;
			z-index: 9;
			cursor: ew-resize;
			/*set the appearance of the slider:*/
			width: 40px;
			height: 40px;
			background-color: #2196F3;
			opacity: 0.7;
			border-radius: 50%;
		}
	</style>
	<script>
		function initComparisons() {
			var x, i;
			/*find all elements with an "overlay" class:*/
			x = document.getElementsByClassName("img-comp-overlay");
			for (i = 0; i < x.length; i++) {
				/*once for each "overlay" element:
				pass the "overlay" element as a parameter when executing the compareImages function:*/
				compareImages(x[i]);
			}
			function compareImages(img) {
				var slider, img, clicked = 0, w, h;
				/*get the width and height of the img element*/
				w = img.offsetWidth;
				h = img.offsetHeight;
				/*set the width of the img element to 50%:*/
				img.style.width = (w / 2) + "px";
				/*create slider:*/
				slider = document.createElement("DIV");
				slider.setAttribute("class", "img-comp-slider");
				/*insert slider*/
				img.parentElement.insertBefore(slider, img);
				/*position the slider in the middle:*/
				slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
				slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
				/*execute a function when the mouse button is pressed:*/
				slider.addEventListener("mousedown", slideReady);
				/*and another function when the mouse button is released:*/
				window.addEventListener("mouseup", slideFinish);
				/*or touched (for touch screens:*/
				slider.addEventListener("touchstart", slideReady);
				/*and released (for touch screens:*/
				window.addEventListener("touchend", slideFinish);
				function slideReady(e) {
					/*prevent any other actions that may occur when moving over the image:*/
					e.preventDefault();
					/*the slider is now clicked and ready to move:*/
					clicked = 1;
					/*execute a function when the slider is moved:*/
					window.addEventListener("mousemove", slideMove);
					window.addEventListener("touchmove", slideMove);
				}
				function slideFinish() {
					/*the slider is no longer clicked:*/
					clicked = 0;
				}
				function slideMove(e) {
					var pos;
					/*if the slider is no longer clicked, exit this function:*/
					if (clicked == 0) return false;
					/*get the cursor's x position:*/
					pos = getCursorPos(e)
					/*prevent the slider from being positioned outside the image:*/
					if (pos < 0) pos = 0;
					if (pos > w) pos = w;
					/*execute a function that will resize the overlay image according to the cursor:*/
					slide(pos);
				}
				function getCursorPos(e) {
					var a, x = 0;
					e = e || window.event;
					/*get the x positions of the image:*/
					a = img.getBoundingClientRect();
					/*calculate the cursor's x coordinate, relative to the image:*/
					x = e.pageX - a.left;
					/*consider any page scrolling:*/
					x = x - window.pageXOffset;
					return x;
				}
				function slide(x) {
					/*resize the image:*/
					img.style.width = x + "px";
					/*position the slider:*/
					slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
				}
			}
		}

		function fitToScreen(el) {
			let elHeight = el.offsetHeight;
			let elWidth = el.offsetWidth;

			const viewW = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
			const viewH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

			const widthRatio = viewW / elWidth;
			const heightRatio = viewH / elHeight;
			const ratio = Math.min(widthRatio, heightRatio);

			elHeight = Math.ceil(ratio * elHeight);
			elWidth = Math.ceil(ratio * elWidth);

			const marginTB = Math.floor((viewH - elHeight) / 2);
			const marginLR = Math.floor((viewW - elWidth) / 2);

			el.style.margin = `${marginTB}px ${marginLR}px`;
			el.style.width = `${elWidth}px`;
			el.style.height = `${elHeight}px`;
		}
	</script>
</head>

<body>
	<div class="img-comp-container">
		<div class="img-comp-img">
			<img src="End of Season-0001.png">
		</div>
		<div class="img-comp-img img-comp-overlay">
			<img src="End of Season-0001.jpg">
		</div>
	</div>

	<script>
		window.onload = (event) => {
			const images = document.querySelectorAll('.img-comp-img img');
			for (let img of images) {
				fitToScreen(img)
			}
			const container = document.querySelector('.img-comp-container');
			container.style.height = images[0].style.height;

			/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
			initComparisons();
		};
	</script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	* {
	box-sizing: border-box;
	}

	html,
	body {
	margin: 0;
	background: black;
	}

	.img-comp-container {
	position: relative;
	/* height: 200px; */
	/should be the same height as the images/
	}

	.img-comp-img {
	position: absolute;
	width: auto;
	height: auto;
	overflow: hidden;
	}

	.img-comp-img img {
	display: block;
	vertical-align: middle;
	}

	.img-comp-slider {
	position: absolute;
	z-index: 9;
	cursor: ew-resize;
	/set the appearance of the slider:/
	width: 40px;
	height: 40px;
	background-color: #2196F3;
	opacity: 0.7;
	border-radius: 50%;
	}
	</style>
	<script>
	function initComparisons() {
	var x, i;
	/find all elements with an "overlay" class:/
	x = document.getElementsByClassName("img-comp-overlay");
	for (i = 0; i < x.length; i++) {
	/*once for each "overlay" element:
	pass the "overlay" element as a parameter when executing the compareImages function:*/
	compareImages(x[i]);
	}
	function compareImages(img) {
	var slider, img, clicked = 0, w, h;
	/get the width and height of the img element/
	w = img.offsetWidth;
	h = img.offsetHeight;
	/set the width of the img element to 50%:/
	img.style.width = (w / 2) + "px";
	/create slider:/
	slider = document.createElement("DIV");
	slider.setAttribute("class", "img-comp-slider");
	/insert slider/
	img.parentElement.insertBefore(slider, img);
	/position the slider in the middle:/
	slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
	slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
	/execute a function when the mouse button is pressed:/
	slider.addEventListener("mousedown", slideReady);
	/and another function when the mouse button is released:/
	window.addEventListener("mouseup", slideFinish);
	/or touched (for touch screens:/
	slider.addEventListener("touchstart", slideReady);
	/and released (for touch screens:/
	window.addEventListener("touchend", slideFinish);
	function slideReady(e) {
	/prevent any other actions that may occur when moving over the image:/
	e.preventDefault();
	/the slider is now clicked and ready to move:/
	clicked = 1;
	/execute a function when the slider is moved:/
	window.addEventListener("mousemove", slideMove);
	window.addEventListener("touchmove", slideMove);
	}
	function slideFinish() {
	/the slider is no longer clicked:/
	clicked = 0;
	}
	function slideMove(e) {
	var pos;
	/if the slider is no longer clicked, exit this function:/
	if (clicked == 0) return false;
	/get the cursor's x position:/
	pos = getCursorPos(e)
	/prevent the slider from being positioned outside the image:/
	if (pos < 0) pos = 0;
	if (pos > w) pos = w;
	/execute a function that will resize the overlay image according to the cursor:/
	slide(pos);
	}
	function getCursorPos(e) {
	var a, x = 0;
	e = e \|\| window.event;
	/get the x positions of the image:/
	a = img.getBoundingClientRect();
	/calculate the cursor's x coordinate, relative to the image:/
	x = e.pageX - a.left;
	/consider any page scrolling:/
	x = x - window.pageXOffset;
	return x;
	}
	function slide(x) {
	/resize the image:/
	img.style.width = x + "px";
	/position the slider:/
	slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
	}
	}
	}

	function fitToScreen(el) {
	let elHeight = el.offsetHeight;
	let elWidth = el.offsetWidth;

	const viewW = Math.max(document.documentElement.clientWidth, window.innerWidth \|\| 0);
	const viewH = Math.max(document.documentElement.clientHeight, window.innerHeight \|\| 0);

	const widthRatio = viewW / elWidth;
	const heightRatio = viewH / elHeight;
	const ratio = Math.min(widthRatio, heightRatio);

	elHeight = Math.ceil(ratio * elHeight);
	elWidth = Math.ceil(ratio * elWidth);

	const marginTB = Math.floor((viewH - elHeight) / 2);
	const marginLR = Math.floor((viewW - elWidth) / 2);

	el.style.margin = `${marginTB}px ${marginLR}px`;
	el.style.width = `${elWidth}px`;
	el.style.height = `${elHeight}px`;
	}
	</script>
	</head>

	<body>
	<div class="img-comp-container">
	<div class="img-comp-img">
	<img src="End of Season-0001.png">
	</div>
	<div class="img-comp-img img-comp-overlay">
	<img src="End of Season-0001.jpg">
	</div>
	</div>

	<script>
	window.onload = (event) => {
	const images = document.querySelectorAll('.img-comp-img img');
	for (let img of images) {
	fitToScreen(img)
	}
	const container = document.querySelector('.img-comp-container');
	container.style.height = images[0].style.height;

	/Execute a function that will execute an image compare function for each element with the img-comp-overlay class:/
	initComparisons();
	};
	</script>

	</body>

	</html>