From 1392dacc3a7e294b874b0fb38815cbd20a1874fa Mon Sep 17 00:00:00 2001 From: Jan Niggemann Date: Mon, 23 Feb 2015 16:50:51 +0100 Subject: [PATCH] adds patch for FF-only users --- .../firefox-lightbox-image-autorotation.patch | 142 ++++++++++++++++++ ...firefox-lightbox-image-autorotation.readme | 11 ++ 2 files changed, 153 insertions(+) create mode 100644 patches/firefox-lightbox-image-autorotation.patch create mode 100644 patches/firefox-lightbox-image-autorotation.readme diff --git a/patches/firefox-lightbox-image-autorotation.patch b/patches/firefox-lightbox-image-autorotation.patch new file mode 100644 index 0000000..6e7077d --- /dev/null +++ b/patches/firefox-lightbox-image-autorotation.patch @@ -0,0 +1,142 @@ +From 3fc42c02b31accf49aae8f1b5e4ecc2ac3b7355f Mon Sep 17 00:00:00 2001 +From: Jan Niggemann +Date: Mon, 23 Feb 2015 16:34:25 +0100 +Subject: [PATCH 1/2] adds lightbox image autorotation (FF >v26) Firefox + respects the CSS3 property "image-rotation". This makes + the lightbox squared and centeres the browser-rotated + image therein. + +--- + css/mediaboxBlack.css | 9 ++++++++- + css/mediaboxWhite.css | 9 ++++++++- + js/mediabox1.5.4.js | 16 ++++++++++++++-- + 3 files changed, 30 insertions(+), 4 deletions(-) + +diff --git a/css/mediaboxBlack.css b/css/mediaboxBlack.css +index 9213688..e4e7fde 100644 +--- a/css/mediaboxBlack.css ++++ b/css/mediaboxBlack.css +@@ -41,10 +41,17 @@ + } + #mbCenter img{ + border-radius: 4px; ++ image-orientation: from-image; ++ position: absolute; ++ margin: auto; ++ top: 0; ++ left: 0; ++ right: 0; ++ bottom: 0; + } + + #mbCenter.mbLoading { +- background: #000 url(../images/loading-dark.gif) no-repeat center; ++ background: #000 url(../images/loading2.gif) no-repeat center; + /* This style is applied only during animation. */ + /* For example, the next lines turn off shadows */ + /* improving browser performance on slow systems. */ +diff --git a/css/mediaboxWhite.css b/css/mediaboxWhite.css +index de9d439..7a62a90 100644 +--- a/css/mediaboxWhite.css ++++ b/css/mediaboxWhite.css +@@ -42,10 +42,17 @@ + + #mbCenter img{ + border-radius: 4px; ++ image-orientation: from-image; ++ position: absolute; ++ margin: auto; ++ top: 0; ++ left: 0; ++ right: 0; ++ bottom: 0; + } + + #mbCenter.mbLoading { +- background: #fff url(../images/loading-light.gif) no-repeat center; ++ background: #fff url(../images/WhiteLoading.gif) no-repeat center; + /* This style is applied only during animation. */ + /* For example, the next lines turn off shadows */ + /* improving browser performance on slow systems. */ +diff --git a/js/mediabox1.5.4.js b/js/mediabox1.5.4.js +index 821e599..9e1f04f 100644 +--- a/js/mediabox1.5.4.js ++++ b/js/mediabox1.5.4.js +@@ -815,6 +815,16 @@ var Mediabox; + if (mediaType == "img"){ + mediaWidth = preload.width; + mediaHeight = preload.height; ++ ++ // Hack jn@hz6.de: make lightbox squared to make room for the image (that will be properly rotated by the browser [at least FF since v26]) ++ if (mediaWidth >= mediaHeight) { ++ mediaHeight = mediaWidth ++ } ++ ++ if (mediaWidth < mediaHeight) { ++ mediaWidth = mediaHeight ++ } ++ + if (options.imgBackground) { + media.setStyles({backgroundImage: "url("+URL+")", display: ""}); + } else { // Thanks to Dusan Medlin for fixing large 16x9 image errors in a 4x3 browser +@@ -829,7 +839,9 @@ var Mediabox; + } + if (Browser.ie) preload = document.id(preload); + if (options.clickBlock) preload.addEvent('mousedown', function(e){ e.stop(); }).addEvent('contextmenu', function(e){ e.stop(); }); +- media.setStyles({backgroundImage: "none", display: ""}); ++ ++ // Hack jn@hz6.de: Make position relative to work together with centered image (which is absolutely placed) ++ media.setStyles({backgroundImage: "none", display: "", position: "relative"}); + preload.inject(media); + } + // mediaWidth += "px"; +@@ -973,4 +985,4 @@ Mediabox.scanPage = function() { + }); + }; + +-window.addEvents({domready: Mediabox.scanPage, resize: Mediabox.recenter}); // to recenter the overlay while scrolling, add "scroll: Mediabox.recenter" to the object +\ No newline at end of file ++window.addEvents({domready: Mediabox.scanPage, resize: Mediabox.recenter}); // to recenter the overlay while scrolling, add "scroll: Mediabox.recenter" to the object +-- +1.7.10.4 + + +From 7a11265131c002dbef0940d036105e05b07b9311 Mon Sep 17 00:00:00 2001 +From: Jan Niggemann +Date: Mon, 23 Feb 2015 16:39:33 +0100 +Subject: [PATCH 2/2] fixes spinner filenames + +--- + css/mediaboxBlack.css | 2 +- + css/mediaboxWhite.css | 2 +- + 2 files changed, 2 insertions(+), 2 deletions(-) + +diff --git a/css/mediaboxBlack.css b/css/mediaboxBlack.css +index e4e7fde..95963cd 100644 +--- a/css/mediaboxBlack.css ++++ b/css/mediaboxBlack.css +@@ -51,7 +51,7 @@ + } + + #mbCenter.mbLoading { +- background: #000 url(../images/loading2.gif) no-repeat center; ++ background: #000 url(../images/loading-dark.gif) no-repeat center; + /* This style is applied only during animation. */ + /* For example, the next lines turn off shadows */ + /* improving browser performance on slow systems. */ +diff --git a/css/mediaboxWhite.css b/css/mediaboxWhite.css +index 7a62a90..3d9f2d4 100644 +--- a/css/mediaboxWhite.css ++++ b/css/mediaboxWhite.css +@@ -52,7 +52,7 @@ + } + + #mbCenter.mbLoading { +- background: #fff url(../images/WhiteLoading.gif) no-repeat center; ++ background: #fff url(../images/loading-light.gif) no-repeat center; + /* This style is applied only during animation. */ + /* For example, the next lines turn off shadows */ + /* improving browser performance on slow systems. */ +-- +1.7.10.4 + diff --git a/patches/firefox-lightbox-image-autorotation.readme b/patches/firefox-lightbox-image-autorotation.readme new file mode 100644 index 0000000..861d5f4 --- /dev/null +++ b/patches/firefox-lightbox-image-autorotation.readme @@ -0,0 +1,11 @@ +You access your MinigalNano exclusively with firefox >v26 (for example +on your home server)? + +If you apply this patch, the images in the lightbox are properly rotated +by the browser itself using the information from the EXIF data. + +To fit the images, I made the lightbox squared so there are white +stripes either on the sides or the top and the bottom. + +Jan +(jn@hz6.de)