[PhotoFloat] Image Rotation

[stefan-lists-photofloat at austrink.de]

Hi,

I added functionality to PhotoFloat to handle image rotation.

First, I tried the CSS3 attribute image-orientation, which worked great - until
I realised that Firefox is the only(!) browser to support it.

The next-best solution (patch is attached) works almost perfect for me, however
on IE and webkit browsers the rotated "medium sized" picture (800px) is
displayed only cropped. But that is still better than totally unrotated.
Maybe somebody of you knows more CSS magic than I do and could fix this in my
patch.


Besides the topic mentioned in the previous paragraph, I do suggest inclusion of
my patch.


Regards,
Stefan
-------------- next part --------------
diff --git a/web/css/000-controls.css b/web/css/000-controls.css
index 66fe6d6..1fc6028 100644
--- a/web/css/000-controls.css
+++ b/web/css/000-controls.css
@@ -77,6 +77,21 @@ a:hover {
 #next {
 	right: 0.1em;
 }
+.photo-rotate90 {
+	-ms-transform: rotate(90deg); /* IE 9 */
+	-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
+	image-orientation: 90deg;
+}
+.photo-rotate180 {
+	-ms-transform: rotate(180deg); /* IE 9 */
+	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+	image-orientation: 180deg;
+}
+.photo-rotate270 {
+	-ms-transform: rotate(270deg); /* IE 9 */
+	-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
+	image-orientation: 270deg;
+}
 #photo {
 	border: 0;
 	left: 0;
diff --git a/web/js/011-display.js b/web/js/011-display.js
index f8bbd1b..470de04 100644
--- a/web/js/011-display.js
+++ b/web/js/011-display.js
@@ -97,7 +97,9 @@ $(document).ready(function() {
 			photos = [];
 			for (i = 0; i < currentAlbum.photos.length; ++i) {
 				link = $("<a href=\"#!/" + photoFloat.photoHash(currentAlbum, currentAlbum.photos[i]) + "\"></a>");
-				image = $("<img title=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" alt=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" src=\"" + photoFloat.photoPath(currentAlbum, currentAlbum.photos[i], 150, true) + "\" height=\"150\" width=\"150\" />");
+				rotateClassName = parseOrientationToClassName(currentAlbum.photos[i].orientation);
+				rotateSpec = (rotateClassName === "")?"" : "class=\""+rotateClassName+"\"";
+				image = $("<img " + rotateSpec + " title=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" alt=\"" + photoFloat.trimExtension(currentAlbum.photos[i].name) + "\" src=\"" + photoFloat.photoPath(currentAlbum, currentAlbum.photos[i], 150, true) + "\" height=\"150\" width=\"150\" />");
 				image.get(0).photo = currentAlbum.photos[i];
 				link.append(image);
 				photos.push(link);
@@ -153,6 +156,12 @@ $(document).ready(function() {
 			return fraction[0] + "/" + fraction[1];
 		return (fraction[0] / fraction[1]).toString();
 	}
+	function parseOrientationToClassName(orientationExifString) {
+		return (orientationExifString === "Rotate 270 CW") ? "photo-rotate90"
+		     : (orientationExifString === "Rotate 90 CW")  ? "photo-rotate270"
+		     : (orientationExifString === "Rotate 180")    ? "photo-rotate180"
+                     : ""; //this will inhibit the class attribute from being set
+	}
 	function scaleImage() {
 		var image, container;
 		image = $("#photo");
@@ -169,10 +178,10 @@ $(document).ready(function() {
 		width = currentPhoto.size[0];
 		height = currentPhoto.size[1];
 		if (width > height) {
-			height = height / width * maxSize;
+			height = Math.round(height / width * maxSize);
 			width = maxSize;
 		} else {
-			width = width / height * maxSize;
+			width = Math.round(width / height * maxSize);
 			height = maxSize;
 		}
 		$(window).unbind("resize", scaleImage);
@@ -182,6 +191,7 @@ $(document).ready(function() {
 			.attr("src", photoSrc)
 			.attr("alt", currentPhoto.name)
 			.attr("title", currentPhoto.date)
+			.attr("class", parseOrientationToClassName(currentPhoto.orientation))
 			.load(scaleImage);
 		$("head").append("<link rel=\"image_src\" href=\"" + photoSrc + "\" />");