summaryrefslogtreecommitdiffstats
path: root/data/js
diff options
context:
space:
mode:
authorFlorian Pritz <bluewind@xinu.at>2014-10-03 14:07:08 +0200
committerFlorian Pritz <bluewind@xinu.at>2014-10-03 14:22:34 +0200
commit21ed4d5845fb5b2801639834ad7e9523eb9cadc2 (patch)
tree06369cc779ba8de045c6302f490a107c8b22e971 /data/js
parentc3b75b7edba5c56cd4dab24a323167b23814c6bc (diff)
Support EXIF orientation in colorbox
This also reindents colorbox.css. Signed-off-by: Florian Pritz <bluewind@xinu.at>
Diffstat (limited to 'data/js')
-rw-r--r--data/js/jquery.colorbox.js123
-rw-r--r--data/js/script.js3
2 files changed, 111 insertions, 15 deletions
diff --git a/data/js/jquery.colorbox.js b/data/js/jquery.colorbox.js
index c0348849e..f9b676670 100644
--- a/data/js/jquery.colorbox.js
+++ b/data/js/jquery.colorbox.js
@@ -85,7 +85,10 @@
},
title: function() {
return this.title;
- }
+ },
+ orientation: function() {
+ return 0;
+ },
},
// Abstracting the HTML and event identifiers for easy rebranding
@@ -757,12 +760,20 @@
$loaded = $tag(div, 'LoadedContent').append(object);
function getWidth() {
- settings.w = settings.w || $loaded.width();
+ if (typeof object.renderWidth !== "undefined") {
+ settings.w = object.renderWidth;
+ } else {
+ settings.w = settings.w || $loaded.width();
+ }
settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
return settings.w;
}
function getHeight() {
- settings.h = settings.h || $loaded.height();
+ if (typeof object.renderHeight !== "undefined") {
+ settings.h = object.renderHeight;
+ } else {
+ settings.h = settings.h || $loaded.height();
+ }
settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
return settings.h;
}
@@ -965,6 +976,80 @@
// img.width and img.height of zero immediately after the img.onload fires
setTimeout(function(){
var percent;
+ var width, height;
+ var rotate = 0;
+ var mirror = false;
+ var translateX = false;
+ var translateY = false;
+ var transformation = "";
+
+ var orientation = settings.get('orientation');
+
+ switch (orientation) {
+ case 2:
+ mirror = true;
+ break;
+ case 3:
+ rotate = 180;
+ break;
+ case 4:
+ rotate = 180;
+ mirror = true;
+ break;
+ case 5:
+ rotate = 270;
+ mirror = true;
+ break;
+ case 6:
+ rotate = 90;
+ break;
+ case 7:
+ rotate = 90;
+ mirror = true;
+ break;
+ case 8:
+ rotate = 270;
+ break;
+ }
+
+ if (rotate%360 == 90) {
+ translateY = true;
+ }
+
+ if (rotate%360 == 180) {
+ translateY = true;
+ translateX = true;
+ }
+
+ if (rotate%360 == 270) {
+ translateX = true;
+ }
+
+ if (mirror) {
+ translateX = !translateX;
+ }
+
+ if (rotate%180 == 0) {
+ width = photo.width;
+ height = photo.height;
+ } else {
+ width = photo.height;
+ height = photo.width;
+ }
+ if (rotate != 0) {
+ transformation += "rotate("+rotate+"deg) ";
+ }
+ if (mirror) {
+ transformation +="scaleX(-1) ";
+ }
+ if (translateX) {
+ transformation += "translateX(-100%) ";
+ }
+ if (translateY) {
+ transformation += "translateY(-100%) ";
+ }
+ $(photo).css('transform-origin', '0 0');
+ $(photo).css('transform', transformation);
$.each(['alt', 'longdesc', 'aria-describedby'], function(i,val){
var attr = $(settings.el).attr(val) || $(settings.el).attr('data-'+val);
@@ -974,27 +1059,27 @@
});
if (settings.get('retinaImage') && window.devicePixelRatio > 1) {
- photo.height = photo.height / window.devicePixelRatio;
- photo.width = photo.width / window.devicePixelRatio;
+ height = height / window.devicePixelRatio;
+ width = width / window.devicePixelRatio;
}
if (settings.get('scalePhotos')) {
setResize = function () {
- photo.height -= photo.height * percent;
- photo.width -= photo.width * percent;
+ height -= height * percent;
+ width -= width * percent;
};
- if (settings.mw && photo.width > settings.mw) {
- percent = (photo.width - settings.mw) / photo.width;
+ if (settings.mw && width > settings.mw) {
+ percent = (width - settings.mw) / width;
setResize();
}
- if (settings.mh && photo.height > settings.mh) {
- percent = (photo.height - settings.mh) / photo.height;
+ if (settings.mh && height > settings.mh) {
+ percent = (height - settings.mh) / height;
setResize();
}
}
if (settings.h) {
- photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px';
+ photo.style.marginTop = Math.max(settings.mh - height, 0) / 2 + 'px';
}
if ($related[1] && (settings.get('loop') || $related[index + 1])) {
@@ -1004,12 +1089,20 @@
};
}
- photo.style.width = photo.width + 'px';
- photo.style.height = photo.height + 'px';
+ photo.renderWidth = width;
+ photo.renderHeight = height;
+ if (rotate%180 == 0) {
+ photo.style.width = width + 'px';
+ photo.style.height = height + 'px';
+ } else {
+ photo.style.width = height + 'px';
+ photo.style.height = width + 'px';
+ }
+
prep(photo);
}, 1);
});
-
+
photo.src = href;
} else if (href) {
diff --git a/data/js/script.js b/data/js/script.js
index 9aabf7557..100f30bd0 100644
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -248,6 +248,9 @@ function fixedEncodeURIComponent (str) {
previous: '<span class="glyphicon glyphicon-chevron-left"></span>',
close: '<span class="glyphicon glyphicon-remove"></span>',
loop: false,
+ orientation: function() {
+ return parseInt($(this).children().first().parent().attr("data-orientation"));
+ },
});
}
setup_colorbox();