code-boxx/0-JS-IMAGE-ZOOM.MD

## 0-JS-IMAGE-ZOOM.MD

      
    Raw
  

              0-JS-IMAGE-ZOOM.MD
            
          
    JAVASCRIPT IMAGE ZOOM

https://code-boxx.com/image-zoom-css-javascript/
IMAGE


LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1-hover.css
#zoomA {
  /* (A) OPTIONAL DIMENSIONS */
  width: 600px;
  height: auto;

  /* (B) ANIMATE ZOOM */
  /* ease | ease-in | ease-out | linear */
  transition: transform ease-in-out 0.3s;
}

/* (C) ZOOM ON HOVER */
#zoomA:hover { transform: scale(1.2); }

## 1-hover.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hover Zoom</title>
    <link rel="stylesheet" href="1-hover.css">
  </head>
  <body>
    <img src="demo.png" id="zoomA">
  </body>
</html>

## 2-contained.css
/* (A) OUTER WRAPPER */
#zoomBOut {
  /* (A1) DIMENSIONS */
  width: 600px;
  height: 360px;

  /* (A2) HIDE SCROLLBARS */
  overflow: hidden;
}

/* (B) INNER WRAPPER */
#zoomBIn {
  /* (B1) FIT OUTER WRAPPER */
  width: 100%;
  height: 100%;

  /* (B2) BACKGROUND IMAGE */
  background-image: url("demo.png");
  background-position: center;
  background-size: cover;

  /* (B3) ANIMATE ZOOM */
  transition: transform ease 0.3s;
}

/* (C) ZOOM ON HOVER */
#zoomBIn:hover { transform: scale(1.2); }

## 2-contained.html
<!DOCTYPE html>
<html>
  <head>
    <title>Contained Hover Zoom</title>
    <link rel="stylesheet" href="2-contained.css">
  </head>
  <body>
    <div id="zoomBOut">
      <div id="zoomBIn"></div>
    </div>
  </body>
</html>

## 3-follow.css
#zoomC {
  /* (A) DIMENSIONS */
  width: 600px;
  height: 360px;

  /* (B) BACKGROUND IMAGE */
  background: url("demo.png");
  background-position: center;
  background-size: cover;
}

## 3-follow.html
<!DOCTYPE html>
<html>
  <head>
    <title>Follow Zoom</title>
    <link rel="stylesheet" href="3-follow.css">
    <script src="3-follow.js"></script>
  </head>
  <body>
    <div id="zoomC"></div>
  </body>
</html>

## 3-follow.js
// CREDITS : https://www.cssscript.com/image-zoom-pan-hover-detail-view/
var addZoom = target => {
  // (A) GET CONTAINER + IMAGE SOURCE
  let container = document.getElementById(target),
      imgsrc = container.currentStyle || window.getComputedStyle(container, false);
      imgsrc = imgsrc.backgroundImage.slice(4, -1).replace(/"/g, "");

  // (B) LOAD IMAGE + ATTACH ZOOM
  let img = new Image();
  img.src = imgsrc;
  img.onload = () => {
    // (B1) CALCULATE ZOOM RATIO
    let ratio = img.naturalHeight / img.naturalWidth,
        percentage = ratio * 100 + "%";

    // (B2) ATTACH ZOOM ON MOUSE MOVE
    container.onmousemove = e => {
     let rect = e.target.getBoundingClientRect(),
         xPos = e.clientX - rect.left,
         yPos = e.clientY - rect.top,
         xPercent = xPos / (container.clientWidth / 100) + "%",
         yPercent = yPos / ((container.clientWidth * ratio) / 100) + "%";

      Object.assign(container.style, {
        backgroundPosition: xPercent + " " + yPercent,
        backgroundSize: img.naturalWidth + "px"
      });
    };

    // (B3) RESET ZOOM ON MOUSE LEAVE
    container.onmouseleave = e => {
      Object.assign(container.style, {
        backgroundPosition: "center",
        backgroundSize: "cover"
      });
    };
  }
};

// (C) ATTACH FOLLOW ZOOM
window.onload = () => addZoom("zoomC");

## 4-lightbox.css
/* (A) LIGHTBOX BACKGROUND */
#lightbox {
  /* (A1) COVERS FULLSCREEN */
  position: fixed; z-index: 999;
  top: 0; left: 0;
  width: 100vw; height: 100vh;

  /* (A2) BACKGROUND */
  background: rgba(0, 0, 0, 0.5);

  /* (A3) CENTER IMAGE ON SCREEN */
  display: flex;
  align-items: center;
  align-items: center;

  /* (A4) HIDDEN BY DEFAULT */
  visibility: hidden;
  opacity: 0;

  /* (A5) SHOW/HIDE ANIMATION */
  transition: opacity ease 0.4s;
}

/* (A6) TOGGLE VISIBILITY */
#lightbox.show {
  visibility: visible;
  opacity: 1;
}

/* (B) LIGHTBOX IMAGE */
#lightbox img {
  /* (B1) DIMENSIONS */
  width: 100%;
  height: auto;

  /* (B2) IMAGE FIT */
  /* contain | cover | fill | scale-down */
  object-fit: cover;
}

/* (C) LIGHTBOX IMAGE - FULLSCREEN ALTERNATIVE *
#lightbox img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/* (X) DOES NOT MATTER */
body {
  padding: 0;
  margin: 0;
}
* { box-sizing: border-box; }
.zoomD {
  width: 600px;
  height: auto;
  cursor: pointer;
}

## 4-lightbox.html
<!DOCTYPE html>
<html>
  <head>
    <title>Fullscreen Lightbox</title>
    <link rel="stylesheet" href="4-lightbox.css">
    <script src="4-lightbox.js"></script>
  </head>
  <body>
    <!-- (A) LIGHTBOX CONTAINER -->
    <div id="lightbox"></div>

    <!-- (B) THE IMAGES -->
    <img src="demo.png" class="zoomD">
  </body>
</html>

## 4-lightbox.js
window.onload = () => {
  // (A) GET LIGHTBOX & ALL .ZOOMD IMAGES
  let all = document.getElementsByClassName("zoomD"),
      lightbox = document.getElementById("lightbox");

  // (B) CLICK TO SHOW IMAGE IN LIGHTBOX
  // * SIMPLY CLONE INTO LIGHTBOX & SHOW
  if (all.length>0) { for (let i of all) {
    i.onclick = () => {
      let clone = i.cloneNode();
      clone.className = "";
      lightbox.innerHTML = "";
      lightbox.appendChild(clone);
      lightbox.className = "show";
    };
  }}

  // (C) CLICK TO CLOSE LIGHTBOX
  lightbox.onclick = () => lightbox.className = "";
};

## 5-fullscreen.css
.zoomE {
  width: 600px;
  height: auto;
  cursor: pointer;
}

## 5-fullscreen.html
<!DOCTYPE html>
<html>
  <head>
    <title>Fullscreen Image</title>
    <link rel="stylesheet" href="5-fullscreen.css">
    <script src="5-fullscreen.js"></script>
  </head>
  <body>
    <img src="demo.png" class="zoomE">
  </body>
</html>

## 5-fullscreen.js
window.onload = () => {
  // (A) GET ALL IMAGES
  let all = document.getElementsByClassName("zoomE");

  // (B) CLICK TO GO FULLSCREEN
  if (all.length>0) { for (let i of all) {
    i.onclick = () => {
      // (B1) EXIT FULLSCREEN
      if (document.fullscreenElement != null || document.webkitFullscreenElement != null) {
        if (document.exitFullscreen) { document.exitFullscreen(); }
        else { document.webkitCancelFullScreen(); }
      }

      // (B2) ENTER FULLSCREEN
      else {
        if (i.requestFullscreen) { i.requestFullscreen(); }
        else { i.webkitRequestFullScreen(); }
      }
    };
  }}
};
	#zoomA {
	/* (A) OPTIONAL DIMENSIONS */
	width: 600px;
	height: auto;

	/* (B) ANIMATE ZOOM */
	/* ease \| ease-in \| ease-out \| linear */
	transition: transform ease-in-out 0.3s;
	}

	/* (C) ZOOM ON HOVER */
	#zoomA:hover { transform: scale(1.2); }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hover Zoom</title>
	<link rel="stylesheet" href="1-hover.css">
	</head>
	<body>
	<img src="demo.png" id="zoomA">
	</body>
	</html>
	/* (A) OUTER WRAPPER */
	#zoomBOut {
	/* (A1) DIMENSIONS */
	width: 600px;
	height: 360px;

	/* (A2) HIDE SCROLLBARS */
	overflow: hidden;
	}

	/* (B) INNER WRAPPER */
	#zoomBIn {
	/* (B1) FIT OUTER WRAPPER */
	width: 100%;
	height: 100%;

	/* (B2) BACKGROUND IMAGE */
	background-image: url("demo.png");
	background-position: center;
	background-size: cover;

	/* (B3) ANIMATE ZOOM */
	transition: transform ease 0.3s;
	}

	/* (C) ZOOM ON HOVER */
	#zoomBIn:hover { transform: scale(1.2); }
	#zoomC {
	/* (A) DIMENSIONS */
	width: 600px;
	height: 360px;

	/* (B) BACKGROUND IMAGE */
	background: url("demo.png");
	background-position: center;
	background-size: cover;
	}
	// CREDITS : https://www.cssscript.com/image-zoom-pan-hover-detail-view/
	var addZoom = target => {
	// (A) GET CONTAINER + IMAGE SOURCE
	let container = document.getElementById(target),
	imgsrc = container.currentStyle \|\| window.getComputedStyle(container, false);
	imgsrc = imgsrc.backgroundImage.slice(4, -1).replace(/"/g, "");

	// (B) LOAD IMAGE + ATTACH ZOOM
	let img = new Image();
	img.src = imgsrc;
	img.onload = () => {
	// (B1) CALCULATE ZOOM RATIO
	let ratio = img.naturalHeight / img.naturalWidth,
	percentage = ratio * 100 + "%";

	// (B2) ATTACH ZOOM ON MOUSE MOVE
	container.onmousemove = e => {
	let rect = e.target.getBoundingClientRect(),
	xPos = e.clientX - rect.left,
	yPos = e.clientY - rect.top,
	xPercent = xPos / (container.clientWidth / 100) + "%",
	yPercent = yPos / ((container.clientWidth * ratio) / 100) + "%";

	Object.assign(container.style, {
	backgroundPosition: xPercent + " " + yPercent,
	backgroundSize: img.naturalWidth + "px"
	});
	};

	// (B3) RESET ZOOM ON MOUSE LEAVE
	container.onmouseleave = e => {
	Object.assign(container.style, {
	backgroundPosition: "center",
	backgroundSize: "cover"
	});
	};
	}
	};

	// (C) ATTACH FOLLOW ZOOM
	window.onload = () => addZoom("zoomC");
	/* (A) LIGHTBOX BACKGROUND */
	#lightbox {
	/* (A1) COVERS FULLSCREEN */
	position: fixed; z-index: 999;
	top: 0; left: 0;
	width: 100vw; height: 100vh;

	/* (A2) BACKGROUND */
	background: rgba(0, 0, 0, 0.5);

	/* (A3) CENTER IMAGE ON SCREEN */
	display: flex;
	align-items: center;
	align-items: center;

	/* (A4) HIDDEN BY DEFAULT */
	visibility: hidden;
	opacity: 0;

	/* (A5) SHOW/HIDE ANIMATION */
	transition: opacity ease 0.4s;
	}

	/* (A6) TOGGLE VISIBILITY */
	#lightbox.show {
	visibility: visible;
	opacity: 1;
	}

	/* (B) LIGHTBOX IMAGE */
	#lightbox img {
	/* (B1) DIMENSIONS */
	width: 100%;
	height: auto;

	/* (B2) IMAGE FIT */
	/* contain \| cover \| fill \| scale-down */
	object-fit: cover;
	}

	/* (C) LIGHTBOX IMAGE - FULLSCREEN ALTERNATIVE *
	#lightbox img {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	}

	/* (X) DOES NOT MATTER */
	body {
	padding: 0;
	margin: 0;
	}
	* { box-sizing: border-box; }
	.zoomD {
	width: 600px;
	height: auto;
	cursor: pointer;
	}
	window.onload = () => {
	// (A) GET LIGHTBOX & ALL .ZOOMD IMAGES
	let all = document.getElementsByClassName("zoomD"),
	lightbox = document.getElementById("lightbox");

	// (B) CLICK TO SHOW IMAGE IN LIGHTBOX
	// * SIMPLY CLONE INTO LIGHTBOX & SHOW
	if (all.length>0) { for (let i of all) {
	i.onclick = () => {
	let clone = i.cloneNode();
	clone.className = "";
	lightbox.innerHTML = "";
	lightbox.appendChild(clone);
	lightbox.className = "show";
	};
	}}

	// (C) CLICK TO CLOSE LIGHTBOX
	lightbox.onclick = () => lightbox.className = "";
	};
	window.onload = () => {
	// (A) GET ALL IMAGES
	let all = document.getElementsByClassName("zoomE");

	// (B) CLICK TO GO FULLSCREEN
	if (all.length>0) { for (let i of all) {
	i.onclick = () => {
	// (B1) EXIT FULLSCREEN
	if (document.fullscreenElement != null \|\| document.webkitFullscreenElement != null) {
	if (document.exitFullscreen) { document.exitFullscreen(); }
	else { document.webkitCancelFullScreen(); }
	}

	// (B2) ENTER FULLSCREEN
	else {
	if (i.requestFullscreen) { i.requestFullscreen(); }
	else { i.webkitRequestFullScreen(); }
	}
	};
	}}
	};