Released 2.0.0 🎉

- Added code sandbox link for examples
- Fixed #46

README.md

@@ -210,6 +210,11 @@ In all of the above example it will first try to display the first image and the
 
 The second image is optional, which you should pass when you feel you can improve the image loading experience by first showing low quality image and then progressively update it with high quality image.
 
+### Demo
+codesandbox preview link: [https://8ypwzryom0.codesandbox.io/](https://8ypwzryom0.codesandbox.io/)
+
+codesandbox link: [https://codesandbox.io/s/8ypwzryom0](https://codesandbox.io/s/8ypwzryom0)
+
 ### Like this
 [:star: this repo](https://github.com/s-yadav/iv-viewer)
 

dist/iv-viewer.es.js

@@ -1,5 +1,5 @@
 /**
- * iv-viewer - 2.0.0-beta5
+ * iv-viewer - 2.0.0
  * Author : Sudhanshu Yadav
  * Copyright (c)  2019 to Sudhanshu Yadav, released under the MIT license.
  * git+https://github.com/s-yadav/iv-viewer.git
@@ -1006,7 +1006,7 @@ function () {
         _this7._clearFrames(); // cross-browser wheel delta
 
 
-        var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
+        var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail || -e.deltaY));
         var newZoomValue = zoomValue * (100 + delta * ZOOM_CONSTANT) / 100;
 
         if (!(newZoomValue >= 100 && newZoomValue <= _options.maxZoom)) {

dist/iv-viewer.js

@@ -1,5 +1,5 @@
 /**
- * iv-viewer - 2.0.0-beta5
+ * iv-viewer - 2.0.0
  * Author : Sudhanshu Yadav
  * Copyright (c)  2019 to Sudhanshu Yadav, released under the MIT license.
  * git+https://github.com/s-yadav/iv-viewer.git
@@ -1012,7 +1012,7 @@
           _this7._clearFrames(); // cross-browser wheel delta
 
 
-          var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
+          var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail || -e.deltaY));
           var newZoomValue = zoomValue * (100 + delta * ZOOM_CONSTANT) / 100;
 
           if (!(newZoomValue >= 100 && newZoomValue <= _options.maxZoom)) {

example/container-mode/example.js

@@ -1,49 +1,47 @@
 import ImageViewer from '../../src/ImageViewer';
 
-document.addEventListener('DOMContentLoaded', function () {
-  const images = [{
-    small: '../images/1.jpg',
-    big: '../images/1_big.jpg',
-  }, {
-    small: '../images/2.jpg',
-    big: '../images/2_big.jpg',
-  }, {
-    small: '../images/3.jpg',
-    big: '../images/3_big.jpg',
-  }, {
-    small: '../images/4.jpg',
-    big: '../images/4_big.jpg',
-  }];
-
-  let curImageIdx = 1;
-
-  const total = images.length;
-  const wrapper = document.getElementById('image-gallery');
-
-  const curSpan = wrapper.querySelector('.current');
-  const viewer = new ImageViewer(wrapper.querySelector('.image-container'));
-  window.viewer = viewer;
-  // display total count
-  wrapper.querySelector('.total').innerHTML = total;
-
-  function showImage () {
-    const imgObj = images[curImageIdx - 1];
-    viewer.load(imgObj.small, imgObj.big);
-    curSpan.innerHTML = curImageIdx;
-  }
-
-  wrapper.querySelector('.next').addEventListener('click', function (evt) {
-    curImageIdx++;
-    if (curImageIdx > total) curImageIdx = 1;
-    showImage();
-  });
-
-  wrapper.querySelector('.prev').addEventListener('click', function (evt) {
-    curImageIdx--;
-    if (curImageIdx < 0) curImageIdx = total;
-    showImage();
-  });
-
-  // initially show image
+const images = [{
+  small: '../images/1.jpg',
+  big: '../images/1_big.jpg',
+}, {
+  small: '../images/2.jpg',
+  big: '../images/2_big.jpg',
+}, {
+  small: '../images/3.jpg',
+  big: '../images/3_big.jpg',
+}, {
+  small: '../images/4.jpg',
+  big: '../images/4_big.jpg',
+}];
+
+let curImageIdx = 1;
+
+const total = images.length;
+const wrapper = document.getElementById('image-gallery');
+
+const curSpan = wrapper.querySelector('.current');
+const viewer = new ImageViewer(wrapper.querySelector('.image-container'));
+window.viewer = viewer;
+// display total count
+wrapper.querySelector('.total').innerHTML = total;
+
+function showImage () {
+  const imgObj = images[curImageIdx - 1];
+  viewer.load(imgObj.small, imgObj.big);
+  curSpan.innerHTML = curImageIdx;
+}
+
+wrapper.querySelector('.next').addEventListener('click', function (evt) {
+  curImageIdx++;
+  if (curImageIdx > total) curImageIdx = 1;
   showImage();
 });
+
+wrapper.querySelector('.prev').addEventListener('click', function (evt) {
+  curImageIdx--;
+  if (curImageIdx < 0) curImageIdx = total;
+  showImage();
+});
+
+// initially show image
+showImage();

example/fullscreen-mode/example.js

@@ -2,12 +2,10 @@ import FullScreenViewer from '../../src/FullScreen';
 
 const viewer = new FullScreenViewer();
 
-document.addEventListener('DOMContentLoaded', function () {
-  Array.from(document.querySelectorAll('.gallery-items')).forEach((elem) => {
-    elem.addEventListener('click', function (ev) {
-      const imgSrc = elem.src;
-      const highResolutionImage = elem.getAttribute('data-high-res-src');
-      viewer.show(imgSrc, highResolutionImage);
-    });
+Array.from(document.querySelectorAll('.gallery-items')).forEach((elem) => {
+  elem.addEventListener('click', function (ev) {
+    const imgSrc = elem.src;
+    const highResolutionImage = elem.getAttribute('data-high-res-src');
+    viewer.show(imgSrc, highResolutionImage);
   });
 });

example/image-mode/example.js

@@ -1,7 +1,5 @@
 import ImageViewer from '../../src/ImageViewer';
 
-document.addEventListener('DOMContentLoaded', function () {
-  Array.from(document.querySelectorAll('.pannable-image')).forEach((elem) => {
-      new ImageViewer(elem);
-  });
+Array.from(document.querySelectorAll('.pannable-image')).forEach((elem) => {
+  new ImageViewer(elem);
 });

example/index.css

@@ -0,0 +1,19 @@
+body,
+html {
+  margin: 0;
+}
+
+.header {
+  border-bottom: 1px solid #ccc;
+  text-align: center;
+  padding: 10px;
+}
+
+.nav-link {
+  text-decoration: none;
+  padding: 10px;
+}
+
+nav {
+  text-align: center;
+}

example/index.html

@@ -1,10 +1,17 @@
 <html>
+  <head>
+    <title>Image Viewer Example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="index.css" />
+  </head>
   <body>
+    <h1 class="header">ImageViewer examples</h1>
     <nav>
-      <a href="./container-mode/example.html" >Container Mode</a>
-      <a href="./fullscreen-mode/example.html" >Full Screen Mode</a>
-      <a href="./image-mode/example.html" >Image  Mode</a>
+      <a class="nav-link" href="/container-mode/example.html">Container Mode</a>
+      <a class="nav-link" href="/fullscreen-mode/example.html">
+        Full Screen Mode
+      </a>
+      <a class="nav-link" href="/image-mode/example.html">Image Mode</a>
     </nav>
-    <script src="../src/ImageViewer.js"></script>
   </body>
 </html>

lib/ImageViewer.js

@@ -610,7 +610,7 @@ function () {
         _this7._clearFrames(); // cross-browser wheel delta
 
 
-        var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
+        var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail || -e.deltaY));
         var newZoomValue = zoomValue * (100 + delta * _util.ZOOM_CONSTANT) / 100;
 
         if (!(newZoomValue >= 100 && newZoomValue <= _options.maxZoom)) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iv-viewer",
-  "version": "2.0.0-beta5",
+  "version": "2.0.0",
   "description": "A zooming and panning plugin inspired by google photos for your web images.",
   "main": "lib/index.js",
   "repository": {

src/ImageViewer.js

@@ -466,7 +466,7 @@ class ImageViewer {
       this._clearFrames();
 
       // cross-browser wheel delta
-      const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
+      const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail || -e.deltaY));
 
       const newZoomValue = zoomValue * (100 + delta * ZOOM_CONSTANT) / 100;