Support EXIF orientation in colorbox

This also reindents colorbox.css.

Signed-off-by: Florian Pritz <bluewind@xinu.at>

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 @@
 <div class="container container-wide">
 <div class="upload_thumbnails"><!--
 	<?php foreach($items as $key => $item): ?>
-		--><a rel="gallery" class="colorbox" href="<?php echo site_url("/".$item["id"])."/"; ?>" title="<?php echo htmlentities($item["filename"]); ?>" data-content="<?php echo htmlentities($item["tooltip"]); ?>" data-id="<?php echo $item["id"]; ?>"><img class="thumb" src="<?php echo site_url("file/thumbnail/".$item["id"]); ?>"></a><!--
+		--><a rel="gallery" class="colorbox" data-orientation="<?php echo $item["orientation"]; ?>" href="<?php echo site_url("/".$item["id"])."/"; ?>" title="<?php echo htmlentities($item["filename"]); ?>" data-content="<?php echo htmlentities($item["tooltip"]); ?>" data-id="<?php echo $item["id"]; ?>"><img class="thumb" src="<?php echo site_url("file/thumbnail/".$item["id"]); ?>"></a><!--
 	<?php endforeach; ?>
 	-->
 </div>
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: '<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();