Add single photo pages, navigateable by arrow keys and touch gestures.

public/css/default.css

@@ -474,6 +474,103 @@ textarea {
 }
 
 
+/* Styling for the photo pages
+--------------------------------*/
+#photo_frame {
+	overflow: hidden;
+	text-align: center;
+}
+#photo_frame a {
+	background: #fff;
+	border: 0.9em solid #fff;
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	cursor: -moz-zoom-in;
+	display: inline-block;
+}
+#photo_frame a img {
+	border: none;
+	display: block;
+	height: auto;
+	width: 100%;
+}
+
+#previous_photo, #next_photo {
+	background: #fff;
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	color: #678FA4;
+	font-size: 3em;
+	line-height: 0.5;
+	padding: 32px 8px;
+	position: fixed;
+	text-decoration: none;
+	top: 45%;
+}
+#previous_photo em, #next_photo em {
+	position: absolute;
+	top: -1000em;
+	left: -1000em;
+}
+span#previous_photo, span#next_photo {
+	opacity: 0.25;
+}
+a#previous_photo:hover, a#next_photo:hover {
+	background: #eee;
+	color: #000;
+}
+#previous_photo {
+	left: 0;
+}
+#previous_photo:before {
+	content: '←';
+}
+#next_photo {
+	right: 0;
+}
+#next_photo:before {
+	content: '→';
+}
+
+#sub_photo h2, #sub_photo h3, #photo_exif_box h3 {
+	font: 600 20px/30px "Open Sans", sans-serif;
+	margin: 0 0 10px;
+}
+#sub_photo h3 {
+	font-size: 16px;
+}
+
+#sub_photo {
+	background: #fff;
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	float: left;
+	padding: 2%;
+	margin: 25px 3.5% 25px 0;
+	width: 68.5%;
+}
+
+#photo_exif_box {
+	background: #fff;
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	margin: 25px 0 25px 0;
+	overflow: auto;
+	padding: 2%;
+	float: right;
+	width: 20%;
+}
+#photo_exif_box dt {
+	font-weight: bold;
+	float: left;
+	clear: left;
+	width: 120px;
+}
+#photo_exif_box dt:after {
+	content: ':';
+}
+#photo_exif_box dd {
+	float: left;
+	margin: 0;
+}
+
+
 /* Responsive: smartphone in portrait
 ---------------------------------------*/
 @media only screen and (max-width: 895px) {

public/js/photonav.js

@@ -0,0 +1,72 @@
+function enableKeyDownNavigation() {
+	document.addEventListener("keydown", function (event) {
+		if (event.keyCode == 37) {
+			var target = document.getElementById("previous_photo").href;
+			if (target) {
+				event.preventDefault();
+				document.location.href = target;
+			}
+		}
+		else if (event.keyCode == 39) {
+			var target = document.getElementById("next_photo").href;
+			if (target) {
+				event.preventDefault();
+				document.location.href = target;
+			}
+		}
+	}, false);
+}
+
+function disableKeyDownPropagation(obj) {
+	for (var x = 0; x < obj.length; x++) {
+		obj[x].addEventListener("keydown", function (event) {
+			if (event.keyCode == 37 || event.keyCode == 39) {
+				event.stopPropagation();
+			}
+		});
+	}
+}
+
+function enableTouchNavigation() {
+	var x_down = null;
+	var y_down = null;
+
+	document.addEventListener('touchstart', function(event) {
+		x_down = event.touches[0].clientX;
+		y_down = event.touches[0].clientY;
+	}, false);
+
+	document.addEventListener('touchmove', function(event) {
+		if (!x_down || !y_down) {
+			return;
+		}
+
+		var x_diff = x_down - event.touches[0].clientX;
+		var y_diff = y_down - event.touches[0].clientY;
+
+		if (Math.abs(y_diff) > 50) {
+			return;
+		}
+
+		if (Math.abs(x_diff) > Math.abs(y_diff)) {
+			if (x_diff > 0) {
+				var target = document.getElementById("previous_photo").href;
+				if (target) {
+					event.preventDefault();
+					document.location.href = target;
+				}
+			} else {
+				var target = document.getElementById("next_photo").href;
+				if (target) {
+					event.preventDefault();
+					document.location.href = target;
+				}
+			}
+		}
+	}, false);
+}
+
+enableKeyDownNavigation();
+enableTouchNavigation();
+disableKeyDownPropagation(document.getElementsByTagName("textarea"));
+disableKeyDownPropagation(document.getElementsByTagName("input"));