From a9a646ba3431378625b032d5c54a40b15fde6e28 Mon Sep 17 00:00:00 2001 From: ibesora Date: Tue, 24 Nov 2015 14:37:12 +0100 Subject: [PATCH 1/5] Preserves the image transform --- src/js/lightbox.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/js/lightbox.js b/src/js/lightbox.js index e4689f4c..94135550 100644 --- a/src/js/lightbox.js +++ b/src/js/lightbox.js @@ -155,7 +155,8 @@ function addToAlbum($link) { self.album.push({ link: $link.attr('href'), - title: $link.attr('data-title') || $link.attr('title') + title: $link.attr('data-title') || $link.attr('title'), + transform: $link.children(':first').css('transform') }); } @@ -224,6 +225,7 @@ var windowWidth; $image.attr('src', self.album[imageNumber].link); + $image.css('transform', self.album[imageNumber].transform); $preloader = $(preloader); From dc7b5520a3ef380b41d007a3571f925ac3a970c5 Mon Sep 17 00:00:00 2001 From: ibesora Date: Wed, 25 Nov 2015 12:53:48 +0100 Subject: [PATCH 2/5] Preserves the image transform even if the image is hidden when the album is created --- src/js/lightbox.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/js/lightbox.js b/src/js/lightbox.js index 94135550..3e452dde 100644 --- a/src/js/lightbox.js +++ b/src/js/lightbox.js @@ -153,11 +153,16 @@ var imageNumber = 0; function addToAlbum($link) { + var display = $link.children(':first').css('display'); + if('none' == display) + $link.children(':first').show(); self.album.push({ link: $link.attr('href'), title: $link.attr('data-title') || $link.attr('title'), transform: $link.children(':first').css('transform') }); + if('none' == display) + $link.children(':first').hide(); } // Support both data-lightbox attribute and rel attribute implementations From 55b6a8c16f4de02f12e9aaf3c4cf42cdffcce3c3 Mon Sep 17 00:00:00 2001 From: ibesora Date: Wed, 25 Nov 2015 14:33:40 +0100 Subject: [PATCH 3/5] Computes the new width and height of the transformated image to correctly set the preloader bounding box --- src/js/lightbox.js | 52 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/src/js/lightbox.js b/src/js/lightbox.js index 3e452dde..1efe1735 100644 --- a/src/js/lightbox.js +++ b/src/js/lightbox.js @@ -272,7 +272,57 @@ self.sizeContainer($image.width(), $image.height()); }; - preloader.src = this.album[imageNumber].link; + preloader.setData = function(element) { + preloader.src = element.link; + if('none' != element.transform) + { + + //Get the transform matrix and extract the scale and rotation angle + //Extracted from http://stackoverflow.com/questions/27655885/get-position-rotation-and-scale-from-matrix-in-opengl + //and adapted to a 2d matrix + var values = element.transform.split('(')[1].split(')')[0].split(','); + var a = values[0]; //cos(x) + var b = values[1]; //sin(x) + + var scale = Math.sqrt(a*a + b*b); + var sin = b/scale; + var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); + + //Apply the scale and rotation to the 4 points that delimit the image + //and compute the bounding box + var points = [{x: 0, y: 0}, {x: preloader.width, y: 0}, + {x: 0, y: preloader.height}, {x: preloader.width, y: preloader.height}]; + var cx = preloader.width/2; + var cy = preloader.height/2; + for(var i=0; i<4; ++i) + { + + var x = points[i].x; + var y = points[i].y; + points[i].x = a * (x - cx) + b * (y - cy) + cx; + points[i].y = a * (y - cy) - b * (x - cx) + cy; + + } + + var bb = [{x:9007199254740992, y:9007199254740992}, {x:0, y:0}]; + for(var i=0; i<4; ++i) + { + + bb[0].x = bb[0].x > points[i].x ? points[i].x : bb[0].x; + bb[0].y = bb[0].y > points[i].y ? points[i].y : bb[0].y; + bb[1].x = bb[1].x < points[i].x ? points[i].x : bb[1].x; + bb[1].y = bb[1].y < points[i].y ? points[i].y : bb[1].y; + + } + + preloader.width = (bb[1].x - bb[0].x) * scale; + preloader.height = (bb[1].y - bb[0].y) * scale; + + } + + }; + + preloader.setData(this.album[imageNumber]); this.currentImageIndex = imageNumber; }; From 7c0e502bb5d9aaa33c854ef804e68a4484f72ef9 Mon Sep 17 00:00:00 2001 From: ibesora Date: Thu, 26 Nov 2015 13:30:05 +0100 Subject: [PATCH 4/5] Added a translation to recenter the image after it has been rotated --- src/js/lightbox.js | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/src/js/lightbox.js b/src/js/lightbox.js index 1efe1735..bf8d1a7e 100644 --- a/src/js/lightbox.js +++ b/src/js/lightbox.js @@ -228,14 +228,23 @@ var maxImageWidth; var windowHeight; var windowWidth; + var destWidth; + var destHeight; $image.attr('src', self.album[imageNumber].link); - $image.css('transform', self.album[imageNumber].transform); $preloader = $(preloader); - $image.width(preloader.width); - $image.height(preloader.height); + if('none' == self.album[imageNumber].transform) + { + + $image.width(preloader.width); + $image.height(preloader.height); + + } + + destWidth = $image.width(); + destHeight = $image.height(); if (self.options.fitImagesInViewport) { // Fit image inside the viewport. @@ -258,18 +267,36 @@ if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) { if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) { imageWidth = maxImageWidth; + destWidth = imageWidth; imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10); + destHeight = imageHeight; + if('none' != self.album[imageNumber].transform) + { + imageWidth = imageHeight; + imageHeight = destWidth; + } $image.width(imageWidth); $image.height(imageHeight); } else { imageHeight = maxImageHeight; + destHeight = imageHeight; imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10); + destWidth = imageWidth; + if('none' != self.album[imageNumber].transform) + { + imageWidth = imageHeight; + imageHeight = destWidth; + } $image.width(imageWidth); $image.height(imageHeight); } } } - self.sizeContainer($image.width(), $image.height()); + + //Translate the image to the center of the preloader and add the original transform + $image.css('transform', 'translate(' + (destWidth/2 - $image.width()/2) + 'px, ' + + (destHeight/2 - $image.height()/2) + 'px) ' + self.album[imageNumber].transform); + self.sizeContainer(destWidth, destHeight); }; preloader.setData = function(element) { From 032e1564eab6f388b4cc97dab6246fca36de9e73 Mon Sep 17 00:00:00 2001 From: ibesora Date: Sun, 17 Jan 2016 20:22:54 +0100 Subject: [PATCH 5/5] Corrected a bug that happened when the image had an identity matrix as a transform --- src/js/lightbox.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/lightbox.js b/src/js/lightbox.js index bf8d1a7e..ae2f62f0 100644 --- a/src/js/lightbox.js +++ b/src/js/lightbox.js @@ -235,7 +235,7 @@ $preloader = $(preloader); - if('none' == self.album[imageNumber].transform) + if('none' == self.album[imageNumber].transform || 'matrix(1, 0, 0, 1, 0, 0)' == self.album[imageNumber].transform) { $image.width(preloader.width); @@ -270,7 +270,7 @@ destWidth = imageWidth; imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10); destHeight = imageHeight; - if('none' != self.album[imageNumber].transform) + if('none' != self.album[imageNumber].transform && 'matrix(1, 0, 0, 1, 0, 0)' != self.album[imageNumber].transform) { imageWidth = imageHeight; imageHeight = destWidth; @@ -282,7 +282,7 @@ destHeight = imageHeight; imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10); destWidth = imageWidth; - if('none' != self.album[imageNumber].transform) + if('none' != self.album[imageNumber].transform && 'matrix(1, 0, 0, 1, 0, 0)' != self.album[imageNumber].transform) { imageWidth = imageHeight; imageHeight = destWidth;