47 | ```
48 |
--------------------------------------------------------------------------------
/demo/css/core.min.css:
--------------------------------------------------------------------------------
1 | html{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;font-size:100%;line-height:1;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:inherit;margin:0;padding:0;border:0;font-family:inherit;font-size:100%;line-height:inherit;font-weight:inherit;font-style:inherit;vertical-align:baseline;background:transparent}audio,canvas,iframe,img,svg,video{vertical-align:middle}img{max-width:100%;height:auto;border-style:none}a{color:#000;text-decoration:none}ol,ul{list-style:none}hr{border-bottom:1px solid #000}[type='button'],[type='color'],[type='date'],[type='datetime-local'],[type='email'],[type='file'],[type='month'],[type='number'],[type='password'],[type='range'],[type='reset'],[type='search'],[type='submit'],[type='tel'],[type='text'],[type='time'],[type='url'],[type='week'],select,textarea,button{display:block;width:100%;max-width:100%}[type='button'],[type='color'],[type='date'],[type='datetime-local'],[type='email'],[type='month'],[type='number'],[type='password'],[type='reset'],[type='search'],[type='submit'],[type='tel'],[type='text'],[type='time'],[type='url'],[type='week'],select,textarea,button{border:1px solid #000;border-radius:0;-webkit-appearance:none;-moz-appearance:none}::-webkit-input-placeholder{color:#7f7f7f}:-moz-placeholder{color:#7f7f7f}::-moz-placeholder{color:#7f7f7f;opacity:1}:-ms-input-placeholder{color:#7f7f7f}table,tr,th,td{border:1px solid #000;border-collapse:collapse;border-spacing:0}.row{display:block;width:100%;margin:0 auto;clear:both}.row:before,.row:after{content:' ';display:table;clear:both}.row.left{float:left}.row.right{float:right}.row.xs{max-width:32rem}.row.sm{max-width:48rem}.row.md{max-width:64rem}.row.lg{max-width:80rem}.row.xl{max-width:96rem}.col{display:block;width:100%;float:left}.xs-0{display:none}.xs-1,.xs-2,.xs-3,.xs-4,.xs-5,.xs-6,.xs-7,.xs-8,.xs-9,.xs-10,.xs-11,.xs-12{display:block}.xs-1{width:8.3333%}.xs-2{width:16.6667%}.xs-3{width:25%}.xs-4{width:33.3333%}.xs-5{width:41.6667%}.xs-6{width:50%}.xs-7{width:58.3333%}.xs-8{width:66.6667%}.xs-9{width:75%}.xs-10{width:83.3333%}.xs-11{width:91.6667%}.xs-12{width:100%}@media (min-width:32em){.sm-0{display:none}.sm-1,.sm-2,.sm-3,.sm-4,.sm-5,.sm-6,.sm-7,.sm-8,.sm-9,.sm-10,.sm-11,.sm-12{display:block}.sm-1{width:8.3333%}.sm-2{width:16.6667%}.sm-3{width:25%}.sm-4{width:33.3333%}.sm-5{width:41.6667%}.sm-6{width:50%}.sm-7{width:58.3333%}.sm-8{width:66.6667%}.sm-9{width:75%}.sm-10{width:83.3333%}.sm-11{width:91.6667%}.sm-12{width:100%}}@media (min-width:48em){.md-0{display:none}.md-1,.md-2,.md-3,.md-4,.md-5,.md-6,.md-7,.md-8,.md-9,.md-10,.md-11,.md-12{display:block}.md-1{width:8.3333%}.md-2{width:16.6667%}.md-3{width:25%}.md-4{width:33.3333%}.md-5{width:41.6667%}.md-6{width:50%}.md-7{width:58.3333%}.md-8{width:66.6667%}.md-9{width:75%}.md-10{width:83.3333%}.md-11{width:91.6667%}.md-12{width:100%}}@media (min-width:64em){.lg-0{display:none}.lg-1,.lg-2,.lg-3,.lg-4,.lg-5,.lg-6,.lg-7,.lg-8,.lg-9,.lg-10,.lg-11,.lg-12{display:block}.lg-1{width:8.3333%}.lg-2{width:16.6667%}.lg-3{width:25%}.lg-4{width:33.3333%}.lg-5{width:41.6667%}.lg-6{width:50%}.lg-7{width:58.3333%}.lg-8{width:66.6667%}.lg-9{width:75%}.lg-10{width:83.3333%}.lg-11{width:91.6667%}.lg-12{width:100%}}@media (min-width:80em){.xl-0{display:none}.xl-1,.xl-2,.xl-3,.xl-4,.xl-5,.xl-6,.xl-7,.xl-8,.xl-9,.xl-10,.xl-11,.xl-12{display:block}.xl-1{width:8.3333%}.xl-2{width:16.6667%}.xl-3{width:25%}.xl-4{width:33.3333%}.xl-5{width:41.6667%}.xl-6{width:50%}.xl-7{width:58.3333%}.xl-8{width:66.6667%}.xl-9{width:75%}.xl-10{width:83.3333%}.xl-11{width:91.6667%}.xl-12{width:100%}}
2 |
--------------------------------------------------------------------------------
/demo/css/demo.css:
--------------------------------------------------------------------------------
1 | .demo {
2 | line-height: 1.5rem;
3 | }
4 |
5 | .title {
6 | font-weight: 700;
7 | }
8 |
9 | .container {
10 | padding: 3rem 0;
11 | }
12 |
13 | .container > .row {
14 | padding: 0 1.5rem;
15 | }
16 |
17 | .container > .row:not(:last-child) {
18 | margin-bottom: 1.5rem;
19 | }
20 |
21 | .container > .row > *:not(:last-child) {
22 | margin-bottom: 1.5rem;
23 | }
24 |
--------------------------------------------------------------------------------
/demo/css/image-zoom.css:
--------------------------------------------------------------------------------
1 | /* =============================================================================
2 | Image Zoom JS v0.0.1 | MIT License | https://github.com/alecrios/image-zoom-js
3 | ============================================================================= */
4 |
5 | [data-zoom-backdrop] {
6 | position: fixed;
7 | top: 0;
8 | left: 0;
9 | width: 100vw;
10 | height: 100vh;
11 | z-index: 900;
12 | background-color: rgba(255, 255, 255, 1);
13 | opacity: 0;
14 | transition: opacity 400ms ease;
15 | pointer-events: none;
16 | }
17 |
18 | [data-zoom-backdrop='active'] {
19 | opacity: 1;
20 | pointer-events: auto;
21 | }
22 |
23 | [data-zoom-image] {
24 | position: relative;
25 | z-index: 800;
26 | transform: none;
27 | transition: transform 400ms ease;
28 | cursor: zoom-in;
29 | }
30 |
31 | [data-zoom-image='active'] {
32 | z-index: 1000;
33 | cursor: zoom-out;
34 | }
35 |
--------------------------------------------------------------------------------
/demo/img/example-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alecrios/image-zoom-js/3054f981ef8ab52378536a0b8148f31cd8996516/demo/img/example-1.jpg
--------------------------------------------------------------------------------
/demo/img/example-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alecrios/image-zoom-js/3054f981ef8ab52378536a0b8148f31cd8996516/demo/img/example-2.jpg
--------------------------------------------------------------------------------
/demo/img/example-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alecrios/image-zoom-js/3054f981ef8ab52378536a0b8148f31cd8996516/demo/img/example-3.jpg
--------------------------------------------------------------------------------
/demo/js/image-zoom.js:
--------------------------------------------------------------------------------
1 | /* =============================================================================
2 | Image Zoom JS v0.0.1 | MIT License | https://github.com/alecrios/image-zoom-js
3 | ============================================================================= */
4 |
5 | 'use strict';
6 |
7 | class imageZoom {
8 | constructor(image) {
9 | // Image
10 | this.image = image;
11 |
12 | // Backdrop
13 | this.backdrop = document.querySelector('[data-zoom-backdrop]');
14 | if (this.backdrop === null) {
15 | this.backdrop = document.createElement('div');
16 | this.backdrop.setAttribute('data-zoom-backdrop', '');
17 | document.body.appendChild(this.backdrop);
18 | }
19 |
20 | // Pass `this` through to methods
21 | this.zoomImage = this.zoomImage.bind(this);
22 | this.resetImage = this.resetImage.bind(this);
23 | this.resetImageComplete = this.resetImageComplete.bind(this);
24 |
25 | // Add click event handler
26 | this.image.addEventListener('click', this.zoomImage);
27 | }
28 |
29 | zoomImage() {
30 | // Prevent an image from zooming while another is already active
31 | if (this.backdrop.getAttribute('data-zoom-active') === 'true') return;
32 |
33 | // Declare zoom function to be active
34 | this.backdrop.setAttribute('data-zoom-active', 'true');
35 |
36 | // Handle event listeners
37 | this.image.removeEventListener('click', this.zoomImage);
38 | this.image.addEventListener('click', this.resetImage);
39 | this.backdrop.addEventListener('click', this.resetImage);
40 | document.addEventListener('keyup', this.resetImage);
41 | window.addEventListener('scroll', this.resetImage);
42 | window.addEventListener('resize', this.resetImage);
43 |
44 | // Fade in backdrop
45 | this.backdrop.setAttribute('data-zoom-backdrop', 'active');
46 |
47 | // Set image style
48 | this.image.setAttribute('data-zoom-image', 'active');
49 |
50 | // Set image transform
51 | this.imageBCR = this.image.getBoundingClientRect();
52 | var scale = Math.min(window.innerWidth / this.imageBCR.width, window.innerHeight / this.imageBCR.height);
53 | var translateX = ((window.innerWidth - this.imageBCR.width) / 2) - this.imageBCR.left;
54 | var translateY = ((window.innerHeight - this.imageBCR.height) / 2) - this.imageBCR.top;
55 | this.image.style.transform = `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale})`;
56 | }
57 |
58 | resetImage() {
59 | // Handle event listeners
60 | window.removeEventListener('resize', this.resetImage);
61 | window.removeEventListener('scroll', this.resetImage);
62 | document.removeEventListener('keyup', this.resetImage);
63 | this.backdrop.removeEventListener('click', this.resetImage);
64 | this.image.removeEventListener('click', this.resetImage);
65 | this.image.addEventListener('click', this.zoomImage);
66 |
67 | // Fade out backdrop
68 | this.backdrop.setAttribute('data-zoom-backdrop', '');
69 |
70 | // Reset image style
71 | this.image.addEventListener('transitionend', this.resetImageComplete);
72 |
73 | // Reset image transform
74 | this.image.style.transform = null;
75 | }
76 |
77 | resetImageComplete() {
78 | // Handle event listeners
79 | this.image.removeEventListener('transitionend', this.resetImageComplete);
80 |
81 | // Declare zoom function to be not active
82 | this.backdrop.setAttribute('data-zoom-active', 'false');
83 |
84 | // Reset image style
85 | this.image.setAttribute('data-zoom-image', '');
86 | }
87 | }
88 |
89 | // Create a new instance for each image
90 | document.querySelectorAll('[data-zoom-image]').forEach(function(img) {
91 | new imageZoom(img);
92 | });
93 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius enim quis nulla mattis, id cursus lectus eleifend. Ut eu pulvinar augue. Donec nulla est, dapibus vulputate placerat eu, tempus eget erat. Nam commodo eu erat iaculis commodo.
25 | 26 |Amet, consectetur adipiscing elit. Donec varius enim quis nulla mattis, id cursus lectus eleifend. Ut eu pulvinar augue. Donec nulla est, dapibus vulputate placerat eu, tempus eget erat. Nam commodo eu erat iaculis commodo. Sed ultrices sapien vitae neque scelerisque, sit amet feugiat ipsum tristique. Vestibulum et ornare lorem. Phasellus lacinia pellentesque augue. In consequat libero magna, in placerat nibh semper a. Donec rutrum nibh ante, non feugiat enim dapibus efficitur. Quisque hendrerit, massa ac posuere iaculis, odio metus dictum tellus, vel semper mauris nunc eget urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius enim quis nulla.
27 | 28 |
29 |
30 | Efficitur. Quisque hendrerit, massa ac posuere iaculis, odio metus dictum tellus, vel semper mauris nunc eget urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius enim quis nulla mattis, id cursus lectus eleifend. Ut eu pulvinar augue. Donec nulla est, dapibus vulputate placerat eu, tempus eget erat. Nam commodo eu erat iaculis commodo. Sed ultrices sapien vitae neque scelerisque, sit amet feugiat ipsum tristique. Vestibulum et ornare lorem. Phasellus lacinia pellentesque augue. In consequat libero magna, in placerat.
31 | 32 |Phasellus lacinia pellentesque augue. In consequat libero magna, in placerat nibh semper a. Donec rutrum nibh ante, non feugiat enim dapibus efficitur. Quisque hendrerit, massa ac posuere iaculis, odio metus dictum tellus, vel semper mauris nunc eget urna. Lorem ipsum dolor sit amet.
33 | 34 |
35 |
36 | Placerat eu, tempus eget erat. Nam commodo eu erat iaculis commodo. Sed ultrices sapien vitae neque scelerisque, sit amet feugiat ipsum tristique. Vestibulum et ornare lorem. Phasellus lacinia pellentesque augue. In consequat libero magna, in placerat nibh semper a. Donec rutrum nibh ante, non feugiat enim dapibus efficitur. Quisque hendrerit.
37 | 38 |Tristique. Vestibulum et ornare lorem. Phasellus lacinia pellentesque augue. In consequat libero magna, in placerat nibh semper a. Donec rutrum nibh ante, non feugiat enim dapibus efficitur. Quisque hendrerit, massa ac posuere iaculis, odio metus dictum tellus, vel semper mauris nunc eget urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius enim quis nulla mattis, id cursus lectus eleifend. Ut eu pulvinar augue. Donec nulla est, dapibus vulputate placerat eu, tempus eget erat. Nam commodo eu erat iaculis commodo. Sed ultrices sapien vitae neque scelerisque, sit amet feugiat ipsum tristique. Vestibulum et ornare.
39 | 40 |Ornare lorem. Phasellus lacinia pellentesque augue. In consequat libero magna, in placerat nibh semper a. Donec rutrum nibh ante, non feugiat enim dapibus efficitur. Quisque hendrerit, massa ac posuere iaculis, odio metus dictum tellus, vel semper mauris nunc eget urna.
41 | 42 |Tellus, vel semper mauris nunc eget urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius enim quis nulla mattis, id cursus lectus eleifend. Ut eu pulvinar augue. Donec nulla est, dapibus vulputate placerat eu, tempus eget erat. Nam commodo eu erat iaculis commodo. Sed ultrices sapien vitae neque scelerisque, sit amet feugiat ipsum tristique. Vestibulum et ornare lorem. Phasellus.
43 | 44 |
45 |
46 | Nulla est, dapibus vulputate placerat eu, tempus eget erat. Nam commodo eu erat iaculis commodo. Sed ultrices sapien vitae neque scelerisque, sit amet feugiat ipsum tristique. Vestibulum et ornare lorem. Phasellus lacinia pellentesque augue. In consequat libero magna, in placerat nibh semper a. Donec rutrum nibh ante, non feugiat enim dapibus efficitur. Quisque hendrerit, massa ac posuere iaculis, odio metus dictum tellus, vel semper mauris nunc.
47 | 48 |Placerat eu, tempus eget erat. Nam commodo eu erat iaculis commodo. Sed ultrices sapien vitae neque scelerisque, sit amet feugiat ipsum tristique. Vestibulum et ornare lorem. Phasellus lacinia pellentesque augue. In consequat libero magna, in placerat nibh semper a. Donec.
49 |