mauron85 · May 15, 2021 08:22 · mauron85 · May 15, 2021
diff --git a/imgcompare.html b/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>