From 21ed4d5845fb5b2801639834ad7e9523eb9cadc2 Mon Sep 17 00:00:00 2001 From: Florian Pritz Date: Fri, 3 Oct 2014 14:07:08 +0200 Subject: Support EXIF orientation in colorbox This also reindents colorbox.css. Signed-off-by: Florian Pritz --- application/controllers/file.php | 2 + application/views/file/fragments/thumbnail.php | 2 +- data/css/colorbox.css | 32 ++++--- data/js/jquery.colorbox.js | 123 ++++++++++++++++++++++--- data/js/script.js | 3 + 5 files changed, 131 insertions(+), 31 deletions(-) diff --git a/application/controllers/file.php b/application/controllers/file.php index 57e9d4d1d..a9c1ef12a 100644 --- a/application/controllers/file.php +++ b/application/controllers/file.php @@ -168,6 +168,7 @@ class File extends MY_Controller { case "image/png": case "image/gif": $filedata["tooltip"] = $this->_tooltip_for_image($filedata); + $filedata["orientation"] = libraries\Image::get_exif_orientation($file); $this->output_cache->add_merge( array("items" => array($filedata)), 'file/fragments/thumbnail' @@ -553,6 +554,7 @@ class File extends MY_Controller { continue; } $query[$key]["tooltip"] = $this->_tooltip_for_image($item); + $query[$key]["orientation"] = libraries\Image::get_exif_orientation($this->mfile->file($item["hash"])); } $this->data["items"] = $query; diff --git a/application/views/file/fragments/thumbnail.php b/application/views/file/fragments/thumbnail.php index 0d7455369..61d15f325 100644 --- a/application/views/file/fragments/thumbnail.php +++ b/application/views/file/fragments/thumbnail.php @@ -3,7 +3,7 @@
" title="" data-content="" data-id="">">" href="" title="" data-content="" data-id="">">
diff --git a/data/css/colorbox.css b/data/css/colorbox.css index 395a01ebe..2cd015259 100644 --- a/data/css/colorbox.css +++ b/data/css/colorbox.css @@ -1,6 +1,6 @@ /* - Colorbox Core Style: - The following CSS is consistent between example themes and should not be altered. + Colorbox Core Style: + The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxWrapper {max-width:none;} @@ -16,22 +16,23 @@ #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* - User Style: - Change the following styles to modify the appearance of Colorbox. They are - ordered & tabbed in a way that represents the nesting of the generated HTML. + User Style: + Change the following styles to modify the appearance of Colorbox. They are + ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);} #colorbox{outline:0;} - #cboxContent{margin-top:32px; overflow:visible; background:#000;} - .cboxIframe{background:#fff;} - #cboxError{padding:50px; border:1px solid #ccc;} - #cboxLoadedContent{background:#000; padding:1px;} - #cboxLoadingGraphic{background:url(/data/img/colorbox/loading.gif) no-repeat center center;} - #cboxLoadingOverlay{background:#000;} - #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} - #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px; display: none;} + #cboxContent{margin-top:32px; overflow:visible; background:#000;} + .cboxIframe{background:#fff;} + #cboxError{padding:50px; border:1px solid #ccc;} + #cboxLoadedContent{background:#000; padding:1px;overflow:hidden !important;} + .cboxPhoto{float:left !important;} + #cboxLoadingGraphic{background:url(/data/img/colorbox/loading.gif) no-repeat center center;} + #cboxLoadingOverlay{background:#000;} + #cboxTitle{position:absolute; top:-22px; left:0; color:#000;} + #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px; display: none;} - /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ + /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ /*#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(/data/img/colorbox/controls.png) no-repeat 0 0;}*/ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { @@ -52,7 +53,8 @@ #cboxClose{right:0;} .cboxSlideshow_on #cboxSlideshow, .cboxSlideshow_off #cboxSlideshow{right:44px;} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;} - /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ + + /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ /*#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}*/ /*#cboxPrevious{background-position:0px 0px; right:44px;}*/ 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: '', close: '', loop: false, + orientation: function() { + return parseInt($(this).children().first().parent().attr("data-orientation")); + }, }); } setup_colorbox(); -- cgit v1.2.3-24-g4f1b