Revision:
click and slide the blue slider to compare two images:
<div class="img-comp-container">
<div class="img-comp-img">
<img src="../images/2018-Sh-01.jpg" width="800" height="auto">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="../images/2018-Sh-02.jpg" width="800" height="auto">
</div>
</div>
<style>
.img-comp-container img{margin-left: 1vw; border: 0.5vw outset burlywood; }
.img-comp-container {position: relative; height: 40vw; margin-left: 15vw;/*should be the same height as the images*/}
.img-comp-img {position: absolute; width: auto; height: auto; overflow:hidden;}
.img-comp-img img {display:inline; 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;
x = document.getElementsByClassName("img-comp-overlay");
for (i = 0; i < x.length; i++) {
compareImages(x[i]);
}
function compareImages(img) {
var slider, img, clicked = 0, w, h;
w = img.offsetWidth;
h = img.offsetHeight;
img.style.width = (w / 2) + "px";
/*create and insert slider:*/
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
img.parentElement.insertBefore(slider, img);
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
slider.addEventListener("mousedown", slideReady);
window.addEventListener("mouseup", slideFinish);
slider.addEventListener("touchstart", slideReady);
window.addEventListener("touchstop", slideFinish);
function slideReady(e) {
e.preventDefault();
clicked = 1;
window.addEventListener("mousemove", slideMove);
window.addEventListener("touchmove", slideMove);
}
function slideFinish() {
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;
a = img.getBoundingClientRect();
x = e.pageX - a.left;
x = x - window.pageXOffset;
return x;
}
function slide(x) {
img.style.width = x + "px";
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}
}
}
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
mouse over the image:
<div class="img-magnifier-container">
<img id="myimage" src="../images/2018-Sh-02.jpg" width="800" height="400">
</div>
<style>
.img-magnifier-container { position:relative; margin-left: 15vw;}
.img-magnifier-glass { position: absolute; border: 0.1vw solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 6vw;height: 6vw;}
</style>
<script>
function magnify(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/*create and insert magnifier glass:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
img.parentElement.insertBefore(glass, img);
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/*execute a function when someone moves the magnifier glass over the image or touches the screen:*/
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
e.preventDefault();
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/*prevent the magnifier glass from being positioned outside the image:*/
if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
if (x < w / zoom) {x = w / zoom;}
if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
if (y < h / zoom) {y = h / zoom;}
/*set the position of the magnifier glass:*/
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/*display what the magnifier glass "sees":*/
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
a = img.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
/* Initiate Magnify Function with the id of the image, and the strength of the magnifier glass:*/
magnify("myimage", 3);
</script>
click the icons:
<div class="spec">
<p>
<button type="button" onclick="zoomin()"><img src="./images/zoom-in.png" width="10"> Zoom In</button>
<button type="button" onclick="zoomout()"><img src="./images/zoom-out.jpg" width="10"> Zoom Out</button>
</p>
<img src="./images/2018-Sh-02.jpg" id="Shanghai" width="650" alt="Shanghai">
</div>
<script>
function zoomin(){
var myImg = document.getElementById("Shanghai");
var currWidth = myImg.clientWidth;
if(currWidth == 1500){
alert("Maximum zoom-in level reached.");
} else{
myImg.style.width = (currWidth + 50) + "px";
}
}
function zoomout(){
var myImg = document.getElementById("Shanghai");
var currWidth = myImg.clientWidth;
if(currWidth == 50){
alert("Maximum zoom-out level reached.");
} else{
myImg.style.width = (currWidth - 50) + "px";
}
}
</script>
<div>
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front">front</div>
<div class="cube__face cube__face--back">back</div>
<div class="cube__face cube__face--right">right</div>
<div class="cube__face cube__face--left">left</div>
<div class="cube__face cube__face--top">top</div>
<div class="cube__face cube__face--bottom">bottom</div>
</div>
</div>
<p class="radio-group">
<label><input type="radio" name="rotate-cube-side" value="front"checked />front</label>
<label><input type="radio" name="rotate-cube-side" value="right" />right</label>
<label><input type="radio" name="rotate-cube-side" value="back" />back</label>
<label><input type="radio" name="rotate-cube-side" value="left" />left</label>
<label><input type="radio" name="rotate-cube-side" value="top" />top</label>
<label><input type="radio" name="rotate-cube-side" value="bottom" />bottom</label>
</p>
</div>
<style>
.scene {width: 30vw; height: 30vw; border: 1px solid #CCC; margin: 8vw; perspective: 50vw;}
.cube {width: 30vw; height: 30vw; position: relative; transform-style: preserve-3d; transform: translateZ(-10vw); transition: transform 1s; }
.cube.show-front { transform: translateZ(-10vw) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-10vw) rotateY( -90deg); }
.cube.show-back { transform: translateZ(-10vw) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-10vw) rotateY( 90deg); }
.cube.show-top { transform: translateZ(-10vw) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-10vw) rotateX( 90deg); }
.cube__face {position: absolute; width: 30vw; height: 30vw; border: 0.2vw
solid black; line-height: 30vw; font-size: 4vw; font-weight: bold;
color: red; text-align: center; vertical-align: text-top;}
.cube__face--front { background-image: url("../images/1.jpg"); background-size:cover;}
.cube__face--right { background-image: url("../images/2.jpg"); background-size:cover;}
.cube__face--back { background-image: url("../images/3.jpg"); background-size:cover;}
.cube__face--left { background-image: url("../images/8.jpg"); background-size:cover;}
.cube__face--top { background-image: url("../images/5.jpg"); background-size:cover;}
.cube__face--bottom { background-image: url("../images/6.jpg"); background-size:cover;}
.cube__face--front { transform: rotateY( 0deg) translateZ(15vw); }
.cube__face--right { transform: rotateY( 90deg) translateZ(15vw); }
.cube__face--back { transform: rotateY(180deg) translateZ(15vw); }
.cube__face--left { transform: rotateY(-90deg) translateZ(15vw); }
.cube__face--top { transform: rotateX( 90deg) translateZ(15vw); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(15vw); }
label { margin-right: 1vw; }
</style>
<script>
var cube = document.querySelector('.cube');
var radioGroup = document.querySelector('.radio-group');
var currentClass = '';
function changeSide() {
var checkedRadio = radioGroup.querySelector(':checked');
var showClass = 'show-' + checkedRadio.value;
if ( currentClass ) {
cube.classList.remove( currentClass );
}
cube.classList.add( showClass );
currentClass = showClass;
}
// set initial side
changeSide();
radioGroup.addEventListener( 'change', changeSide );
</script>