Fixed #264 - Fixed wrong mouse-zoom when the page is scrolled

README.md

@@ -223,6 +223,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.10.3 - Fixed #264 - Fixed wrong mouse-zoom when the page is scrolled**    
 **2.10.2 - Fixed #258 with opacity flicker on overlay. For this, moved style option captionOpacity to js plugin**    
 **2.10.1 - Fixed #255 fast switching photos and #256 for hiding back and next buttons on loop: false**    
 **2.10.0 - Fixed #254 - Nav Buttons disappear and adding new method getLighboxData so get some useful data for #251**    

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "simplelightbox",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "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.10.2" />
+<link rel="stylesheet" href="../dist/simple-lightbox.css?v2.10.3" />
 <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.10.2</sup></h1>
+				<h1>SimpleLightbox <sup>v2.10.3</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>
@@ -642,6 +642,7 @@ <h2>Customization</h2>
 				<h2>Changelog</h2>
 			</div>
 			<div class="col-right">
+				<strong>2.10.3</strong> - Fixed #264 - Fixed wrong mouse-zoom when the page is scrolled<br />
 				<strong>2.10.2</strong> - Fixed #258 with opacity flicker on overlay. For this, moved style option captionOpacity to js plugin<br />
 				<strong>2.10.1</strong> - Fixed #255 fast switching photos and #256 for hiding back and next buttons on loop: false<br />
 				<strong>2.10.0</strong> - Fixed #254 - Nav Buttons disappear and adding new method getLighboxData so get some useful data for #251<br />
@@ -757,7 +758,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.js?v2.10.2"></script>
+<script src="../dist/simple-lightbox.js?v2.10.3"></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.10.2
+	Version 2.10.3
 */
 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.10.2
+	Version 2.10.3
 */
 class SimpleLightbox {
 
@@ -735,8 +735,10 @@ class SimpleLightbox {
 
                 this.controlCoordinates.targetScale = scale;
 
+                let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop;
+
                 this.controlCoordinates.pinchOffsetX = event.pageX;
-                this.controlCoordinates.pinchOffsetY = event.pageY;
+                this.controlCoordinates.pinchOffsetY = event.pageY - scrollTopPos || 0; // need to substract the scroll position
 
                 this.controlCoordinates.limitOffsetX = ((this.controlCoordinates.imgWidth * this.controlCoordinates.targetScale) - this.controlCoordinates.containerWidth) / 2;
                 this.controlCoordinates.limitOffsetY = ((this.controlCoordinates.imgHeight * this.controlCoordinates.targetScale) - this.controlCoordinates.containerHeight) / 2;

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.10.2
+	Version 2.10.3
 */
 (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";
@@ -811,8 +811,10 @@ var SimpleLightbox = /*#__PURE__*/function () {
           scale += delta * _this6.options.scrollZoomFactor * scale;
           scale = Math.max(1, Math.min(_this6.options.maxZoom, scale));
           _this6.controlCoordinates.targetScale = scale;
+          var scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop;
           _this6.controlCoordinates.pinchOffsetX = event.pageX;
-          _this6.controlCoordinates.pinchOffsetY = event.pageY;
+          _this6.controlCoordinates.pinchOffsetY = event.pageY - scrollTopPos || 0; // need to substract the scroll position
+
           _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
           _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
           _this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale;

dist/simple-lightbox.js

@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.10.2
+	Version 2.10.3
 */
 (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){
 (function (global){(function (){
@@ -798,8 +798,10 @@ var SimpleLightbox = /*#__PURE__*/function () {
           scale += delta * _this6.options.scrollZoomFactor * scale;
           scale = Math.max(1, Math.min(_this6.options.maxZoom, scale));
           _this6.controlCoordinates.targetScale = scale;
+          var scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop;
           _this6.controlCoordinates.pinchOffsetX = event.pageX;
-          _this6.controlCoordinates.pinchOffsetY = event.pageY;
+          _this6.controlCoordinates.pinchOffsetY = event.pageY - scrollTopPos || 0; // need to substract the scroll position
+
           _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
           _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
           _this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale;

dist/simple-lightbox.legacy.js

@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.10.2
+	Version 2.10.3
 */
 (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){
 var global = require('../internals/global');
@@ -5553,8 +5553,10 @@ var SimpleLightbox = /*#__PURE__*/function () {
           scale += delta * _this6.options.scrollZoomFactor * scale;
           scale = Math.max(1, Math.min(_this6.options.maxZoom, scale));
           _this6.controlCoordinates.targetScale = scale;
+          var scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop;
           _this6.controlCoordinates.pinchOffsetX = event.pageX;
-          _this6.controlCoordinates.pinchOffsetY = event.pageY;
+          _this6.controlCoordinates.pinchOffsetY = event.pageY - scrollTopPos || 0; // need to substract the scroll position
+
           _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
           _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
           _this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale;

dist/simple-lightbox.modules.js

@@ -2,7 +2,7 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.10.2
+	Version 2.10.3
 */
 "use strict";
 
@@ -796,8 +796,10 @@ var SimpleLightbox = /*#__PURE__*/function () {
           scale += delta * _this6.options.scrollZoomFactor * scale;
           scale = Math.max(1, Math.min(_this6.options.maxZoom, scale));
           _this6.controlCoordinates.targetScale = scale;
+          var scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop;
           _this6.controlCoordinates.pinchOffsetX = event.pageX;
-          _this6.controlCoordinates.pinchOffsetY = event.pageY;
+          _this6.controlCoordinates.pinchOffsetY = event.pageY - scrollTopPos || 0; // need to substract the scroll position
+
           _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
           _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
           _this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplelightbox",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "description": "Touch-friendly modern image lightbox for mobile and desktop with optional jQuery support",
   "main": "dist/simple-lightbox.js",
   "style": "dist/simple-lightbox.css",

src/license-notice.txt

@@ -2,5 +2,5 @@
 	By André Rinas, www.andrerinas.de
 	Documentation, www.simplelightbox.de
 	Available for use under the MIT License
-	Version 2.10.2
+	Version 2.10.3
 */

src/simple-lightbox.js

@@ -729,8 +729,10 @@ class SimpleLightbox {
 
                 this.controlCoordinates.targetScale = scale;
 
+                let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop;
+
                 this.controlCoordinates.pinchOffsetX = event.pageX;
-                this.controlCoordinates.pinchOffsetY = event.pageY;
+                this.controlCoordinates.pinchOffsetY = event.pageY - scrollTopPos || 0; // need to substract the scroll position
 
                 this.controlCoordinates.limitOffsetX = ((this.controlCoordinates.imgWidth * this.controlCoordinates.targetScale) - this.controlCoordinates.containerWidth) / 2;
                 this.controlCoordinates.limitOffsetY = ((this.controlCoordinates.imgHeight * this.controlCoordinates.targetScale) - this.controlCoordinates.containerHeight) / 2;