begin

README.md

@@ -117,6 +117,8 @@ For a complete example just look at the demo folder.
 | fadeSpeed | 300 | int | The duration for fading in and out in milliseconds. Used for caption fadein/out too. If smaller than 100 it should be used with animationSlide:false |
 | uniqueImages | true | bool | Whether to uniqualize images or not |
 | focus | true | bool | Focus the lightbox on open to enable tab control |
+| scrollZoom | true | bool | Can zoom image with mousewheel scrolling |
+| scrollZoomFactor | true | bool | How much zoom when scrolling via mousewheel |
 
 ### Events
 | Name | Description |
@@ -220,6 +222,7 @@ Run `gulp watch` to enable continous watching of both src/simple-lightbox.js and
 Just call `gulp build` to have all files and variants created inside dist!
 
 ### Changelog
+**2.9.0 - Added mousescroll function with new options mouseScroll and mouseScrollFactor**  
 **2.8.1 - Fixed #250 - No closing if image load fails. #249 Disable scroll on Mac works now**  
 **2.8.0 - Fixed #235 - legacy file too big. #236 bad package.json and added support for passive event listeners #240. Thanks to @coderars for the issues and some code**  
 **2.7.3 - Fixed #232 - sourceAttr does not work. Thanks to @bivisual for the issue**  

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "simplelightbox",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "homepage": "https://simplelightbox.com/",
   "authors": [
     "André Rinas <[email protected]> (https://www.andrerinas.de)"

demo/index.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
 <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
-<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.8.1" />
+<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.9.0" />
 <link rel="stylesheet" href="demo.css" />
 <title>SimpleLightbox by André Rinas</title>
 </head>
@@ -14,7 +14,7 @@
 	<div class="header-container">
 		<div class="container demo-container">
 			<div class="info">
-				<h1>SimpleLightbox <sup>v2.8.1</sup></h1>
+				<h1>SimpleLightbox <sup>v2.9.0</sup></h1>
 				<span class="subline">Touch-friendly image lightbox</span>
 				<nav>
 					<a class="btn donate" target="_blank" href="https://www.paypal.me/anrinas">Donate</a>
@@ -407,6 +407,18 @@ <h2>JavaScript Options</h2>
 					<td>bool</td>
 					<td>focus the lightbox on open to enable tab control</td>
 					</tr>
+					<tr>
+					<td>scrollZoom</td>
+					<td>true</td>
+					<td>bool</td>
+					<td>Can zoom image with mousewheel scrolling</td>
+					</tr>
+					<tr>
+					<td>scrollZoomFactor</td>
+					<td>0.5</td>
+					<td>float</td>
+					<td>How much zoom when scrolling via mousewheel</td>
+					</tr>
 					</tbody>
 					</table>
 			</div>
@@ -621,6 +633,7 @@ <h2>Customization</h2>
 				<h2>Changelog</h2>
 			</div>
 			<div class="col-right">
+				<strong>2.9.0</strong> - Added mousescroll function with new options mouseScroll and mouseScrollFactor<br />
 				<strong>2.8.1</strong> - Fixed #250 - No closing if image load fails. #249 Disable scroll on Mac works now<br />
 				<strong>2.8.0</strong> - Fixed #235 - legacy file too big. #236 bad package.json and added support for passive event listeners #240. Thanks to @coderars for the issues and some code<br />
 				<strong>2.7.3</strong> - Fixed #232 - sourceAttr does not work. Thanks to @bivisual for the issue<br />
@@ -732,7 +745,7 @@ <h2>Author/<br />Contributors</h2>
 	</div>
 </footer>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-<script src="../dist/simple-lightbox.min.js?v2.8.1"></script>
+<script src="../dist/simple-lightbox.js?v2.9.0"></script>
 <script>
 	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

dist/simple-lightbox.css

@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.8.1
+	Version 2.9.0
 */
 body.hidden-scroll {
   overflow: hidden; }

dist/simple-lightbox.esm.js

@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.8.1
+	Version 2.9.0
 */
 class SimpleLightbox {
 
@@ -50,7 +50,9 @@ class SimpleLightbox {
         fixedClass: 'sl-fixed',
         fadeSpeed: 300,
         uniqueImages: true,
-        focus: true
+        focus: true,
+        scrollZoom: true,
+        scrollZoomFactor: 0.5
     };
 
     transitionPrefix;
@@ -699,6 +701,75 @@ class SimpleLightbox {
             this.loadImage(event.currentTarget.classList.contains('sl-next') ? 1 : -1);
         });
 
+        if (this.options.scrollZoom) {
+            let pos = {x:0,y:0}
+            let zoom_target = {x:0,y:0}
+            let zoom_point = {x:0,y:0}
+            let scale = 1
+
+            this.addEventListener(this.domNodes.image, ['mousewheel','DOMMouseScroll'], (event) => {
+
+                event.preventDefault();
+
+                zoom_point.x = event.pageX - this.domNodes.image.offsetLeft;
+                zoom_point.y = event.pageY - this.domNodes.image.offsetTop;
+                let delta = event.delta || event.wheelDelta;
+                if (delta === undefined) {
+                    //we are on firefox
+                    delta = event.detail;
+                }
+                delta = Math.max(-1,Math.min(1,delta)); // cap the delta to [-1,1] for cross browser consistency
+
+                // determine the point on where the slide is zoomed in
+                zoom_target.x = (zoom_point.x - pos.x)/scale;
+                zoom_target.y = (zoom_point.y - pos.y)/scale;
+
+                // apply zoom
+                scale += delta * this.options.scrollZoomFactor * scale;
+                scale = Math.max(1, Math.min( this.options.maxZoom, scale));
+
+                // calculate x and y based on zoom
+                pos.x = -zoom_target.x * scale + zoom_point.x;
+                pos.y = -zoom_target.y * scale + zoom_point.y;
+
+                this.controlCoordinates.targetOffsetX = pos.x;
+                this.controlCoordinates.targetOffsetY = pos.y;
+                this.controlCoordinates.targetScale = scale;
+
+                // handle captions
+                if (this.controlCoordinates.targetScale > 1) {
+                    this.controlCoordinates.initialScale = this.controlCoordinates.targetScale;
+                    this.currentImage.style[this.transitionPrefix + 'transform-origin'] = '0 0';
+
+                    this.controlCoordinates.zoomed = true;
+                    if (!this.domNodes.caption.style.opacity && this.domNodes.caption.style.display !== 'none') {
+                        this.fadeOut(this.domNodes.caption, this.options.fadeSpeed);
+                    }
+                } else {
+                    this.controlCoordinates.initialScale = 1;
+                    this.controlCoordinates.targetOffsetX = 0;
+                    this.controlCoordinates.targetOffsetY = 0;
+                    this.controlCoordinates.zoomed = false;
+                    pos = {x:0,y:0}
+                    zoom_target = {x:0,y:0}
+                    zoom_point = {x:0,y:0}
+                    scale = 1
+
+                    if (this.domNodes.caption.style.display === 'none') {
+                        this.fadeIn(this.domNodes.caption, this.options.fadeSpeed);
+                    }
+                }
+
+                this.setZoomData(this.controlCoordinates.targetScale, this.controlCoordinates.targetOffsetX, this.controlCoordinates.targetOffsetY);
+                this.zoomPanElement(this.controlCoordinates.targetOffsetX + "px", this.controlCoordinates.targetOffsetY + "px", this.controlCoordinates.targetScale);
+
+                // remove transform origin
+                if (this.controlCoordinates.targetScale == 1) {
+                    this.currentImage.style[this.transitionPrefix + 'transform-origin'] = null;
+                }
+            });
+        }
+
         this.addEventListener(this.domNodes.image, ['touchstart.' + this.eventNamespace, 'mousedown.' + this.eventNamespace], (event) => {
             if (event.target.tagName === 'A' && event.type === 'touchstart') {
                 return true;
@@ -987,10 +1058,12 @@ class SimpleLightbox {
                 if (this.domNodes.caption.style.display === 'none') {
                     this.fadeIn(this.domNodes.caption, this.options.fadeSpeed);
                 }
+
             }
             setTimeout(() => {
                 if (this.currentImage) {
                     this.currentImage.classList.remove('sl-transition');
+                    this.currentImage.style[this.transitionPrefix + 'transform-origin'] = null;
                 }
             }, 200);
 

dist/simple-lightbox.jquery.js

@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.8.1
+	Version 2.9.0
 */
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 "use strict";
@@ -92,7 +92,9 @@ var SimpleLightbox = /*#__PURE__*/function () {
       fixedClass: 'sl-fixed',
       fadeSpeed: 300,
       uniqueImages: true,
-      focus: true
+      focus: true,
+      scrollZoom: true,
+      scrollZoomFactor: 0.5
     });
 
     _defineProperty(this, "transitionPrefix", void 0);
@@ -774,6 +776,90 @@ var SimpleLightbox = /*#__PURE__*/function () {
 
         _this6.loadImage(event.currentTarget.classList.contains('sl-next') ? 1 : -1);
       });
+
+      if (this.options.scrollZoom) {
+        var pos = {
+          x: 0,
+          y: 0
+        };
+        var zoom_target = {
+          x: 0,
+          y: 0
+        };
+        var zoom_point = {
+          x: 0,
+          y: 0
+        };
+        var scale = 1;
+        this.addEventListener(this.domNodes.image, ['mousewheel', 'DOMMouseScroll'], function (event) {
+          event.preventDefault();
+          zoom_point.x = event.pageX - _this6.domNodes.image.offsetLeft;
+          zoom_point.y = event.pageY - _this6.domNodes.image.offsetTop;
+          var delta = event.delta || event.wheelDelta;
+
+          if (delta === undefined) {
+            //we are on firefox
+            delta = event.detail;
+          }
+
+          delta = Math.max(-1, Math.min(1, delta)); // cap the delta to [-1,1] for cross browser consistency
+          // determine the point on where the slide is zoomed in
+
+          zoom_target.x = (zoom_point.x - pos.x) / scale;
+          zoom_target.y = (zoom_point.y - pos.y) / scale; // apply zoom
+
+          scale += delta * _this6.options.scrollZoomFactor * scale;
+          scale = Math.max(1, Math.min(_this6.options.maxZoom, scale)); // calculate x and y based on zoom
+
+          pos.x = -zoom_target.x * scale + zoom_point.x;
+          pos.y = -zoom_target.y * scale + zoom_point.y;
+          _this6.controlCoordinates.targetOffsetX = pos.x;
+          _this6.controlCoordinates.targetOffsetY = pos.y;
+          _this6.controlCoordinates.targetScale = scale; // handle captions
+
+          if (_this6.controlCoordinates.targetScale > 1) {
+            _this6.controlCoordinates.initialScale = _this6.controlCoordinates.targetScale;
+            _this6.currentImage.style[_this6.transitionPrefix + 'transform-origin'] = '0 0';
+            _this6.controlCoordinates.zoomed = true;
+
+            if (!_this6.domNodes.caption.style.opacity && _this6.domNodes.caption.style.display !== 'none') {
+              _this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed);
+            }
+          } else {
+            _this6.controlCoordinates.initialScale = 1;
+            _this6.controlCoordinates.targetOffsetX = 0;
+            _this6.controlCoordinates.targetOffsetY = 0;
+            _this6.controlCoordinates.zoomed = false;
+            pos = {
+              x: 0,
+              y: 0
+            };
+            zoom_target = {
+              x: 0,
+              y: 0
+            };
+            zoom_point = {
+              x: 0,
+              y: 0
+            };
+            scale = 1;
+
+            if (_this6.domNodes.caption.style.display === 'none') {
+              _this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed);
+            }
+          }
+
+          _this6.setZoomData(_this6.controlCoordinates.targetScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);
+
+          _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale); // remove transform origin
+
+
+          if (_this6.controlCoordinates.targetScale == 1) {
+            _this6.currentImage.style[_this6.transitionPrefix + 'transform-origin'] = null;
+          }
+        });
+      }
+
       this.addEventListener(this.domNodes.image, ['touchstart.' + this.eventNamespace, 'mousedown.' + this.eventNamespace], function (event) {
         if (event.target.tagName === 'A' && event.type === 'touchstart') {
           return true;
@@ -1088,6 +1174,8 @@ var SimpleLightbox = /*#__PURE__*/function () {
         setTimeout(function () {
           if (_this6.currentImage) {
             _this6.currentImage.classList.remove('sl-transition');
+
+            _this6.currentImage.style[_this6.transitionPrefix + 'transform-origin'] = null;
           }
         }, 200);
         _this6.controlCoordinates.capture = true;