zoom html code

Solutions on MaxInterview for zoom html code by the best coders in the world

Search
showing results for - "zoom html code"
Ilaria
28 Feb 2016
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1.0">
5<style>
6* {box-sizing: border-box;}
7
8.img-zoom-container {
9  position: relative;
10}
11
12.img-zoom-lens {
13  position: absolute;
14  border: 1px solid #d4d4d4;
15  /*set the size of the lens:*/
16  width: 40px;
17  height: 40px;
18}
19
20.img-zoom-result {
21  border: 1px solid #d4d4d4;
22  /*set the size of the result div:*/
23  width: 300px;
24  height: 300px;
25}
26</style>
27<script>
28function imageZoom(imgID, resultID) {
29  var img, lens, result, cx, cy;
30  img = document.getElementById(imgID);
31  result = document.getElementById(resultID);
32  /*create lens:*/
33  lens = document.createElement("DIV");
34  lens.setAttribute("class", "img-zoom-lens");
35  /*insert lens:*/
36  img.parentElement.insertBefore(lens, img);
37  /*calculate the ratio between result DIV and lens:*/
38  cx = result.offsetWidth / lens.offsetWidth;
39  cy = result.offsetHeight / lens.offsetHeight;
40  /*set background properties for the result DIV:*/
41  result.style.backgroundImage = "url('" + img.src + "')";
42  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
43  /*execute a function when someone moves the cursor over the image, or the lens:*/
44  lens.addEventListener("mousemove", moveLens);
45  img.addEventListener("mousemove", moveLens);
46  /*and also for touch screens:*/
47  lens.addEventListener("touchmove", moveLens);
48  img.addEventListener("touchmove", moveLens);
49  function moveLens(e) {
50    var pos, x, y;
51    /*prevent any other actions that may occur when moving over the image:*/
52    e.preventDefault();
53    /*get the cursor's x and y positions:*/
54    pos = getCursorPos(e);
55    /*calculate the position of the lens:*/
56    x = pos.x - (lens.offsetWidth / 2);
57    y = pos.y - (lens.offsetHeight / 2);
58    /*prevent the lens from being positioned outside the image:*/
59    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
60    if (x < 0) {x = 0;}
61    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
62    if (y < 0) {y = 0;}
63    /*set the position of the lens:*/
64    lens.style.left = x + "px";
65    lens.style.top = y + "px";
66    /*display what the lens "sees":*/
67    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
68  }
69  function getCursorPos(e) {
70    var a, x = 0, y = 0;
71    e = e || window.event;
72    /*get the x and y positions of the image:*/
73    a = img.getBoundingClientRect();
74    /*calculate the cursor's x and y coordinates, relative to the image:*/
75    x = e.pageX - a.left;
76    y = e.pageY - a.top;
77    /*consider any page scrolling:*/
78    x = x - window.pageXOffset;
79    y = y - window.pageYOffset;
80    return {x : x, y : y};
81  }
82}
83</script>
84</head>
85<body>
86
87<h1>Image Zoom</h1>
88
89<p>Mouse over the image:</p>
90
91<div class="img-zoom-container">
92  <img id="myimage" src="img_girl.jpg" width="300" height="240">
93  <div id="myresult" class="img-zoom-result"></div>
94</div>
95
96<p>The image must be placed inside a container with relative positioning.</p>
97<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
98<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>
99
100<script>
101// Initiate zoom effect:
102imageZoom("myimage", "myresult");
103</script>
104
105</body>
106</html>
107
similar questions
zoom meeting widget for websitehtml make page not zoomablelock the zoom htmlhtml zoom text on hoverhow to disable zoom in html page on different screen resolutions
queries leading to this page
zoom render html symbolhow to zoom image in htmlzoom picture in htmlhtml make zoomzoom out effect for html pageinitial zoom in htmlzoom symbol htmlzoom invite page htmlhtml zoom pagezoom html templatehtml change zoomzoom in video htmlzoom html page jszoom in zoom out shortcut in htmlset zoom level for html pageszoom in the html page through csszoom html pagehtml canas zoom inhtml zoom in zoom outhow to create zoom in and zoom out in htmlhow to zoom page out with htmlzoom w3schoolszoom htmlhow to zoom on a image htmlhtml video zoom outimage zoom in htmlzoom out picture htmlzoom html codezoom in image in htmlzoom in in htmlzoom in zoom out effect in htmlzoom out image in htmlhow to set up html normal zoom outhtml zoom out pagehtml zoomzoom integration into html websitezoom on video htmlhow to set default zoom in htmlhtml image zoomcode zoom hinh htmlhow to set up html normal zoomhtml page zoom in zoom outzoom image in htmlzoom in html imagehtml how to implemenet zoomhow to zoom in in htmlzoom function in htmlenable zooming on your website in htmlenable zoom on your website in htmlcss html zoom inzoom in zoom out image htmlmy page html zoomed incode for zoom in zoom out w3schoolszoom image htmljavascript zoom htmlhow to set zoom for page in htmlzoom in zoom out shortcut html codeset default page zoom htmlembed zoom html codeembedded video html code zoom outhtml zoom factorzoom in htmlhow to zoom in html pagehtml zoom outzoom1 htmlhtml block zoominghtml vide tag zoomhow to disabe the zoom htmlmy web page is zoomed in in htmlzoom animation htmlhtml how to implemenet zoom for pagehtml zoom and how to use ithow to zoom out of website htmlzoom html code