Improve colorbox navigation and document it0.9.5

- Make buttons fixed so you don't have to move the mouse
- Support h/l for vimperator users
- Document mappings so users actually know about them

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

3 files changed, 6 insertions, 5 deletions

diff --git a/public_html/data/css/colorbox.css b/public_html/data/css/colorbox.css
index 8d1b5bd76..1e1238dd5 100644
--- a/public_html/data/css/colorbox.css
+++ b/public_html/data/css/colorbox.css
@@ -29,7 +29,7 @@
 		.cboxPhoto{float:left !important; background: #fff;}
 		#cboxLoadingGraphic{background:url(/data/img/colorbox/loading.gif) no-repeat center center;}
 		#cboxLoadingOverlay{background:#000;}
-		#cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
+		#cboxTitle{position:fixed; top:0; right:66px; color:#fff;}
 		#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 */
@@ -42,8 +42,8 @@
 			overflow:visible;
 			width:20px;
 			height:20px;
-			position:absolute;
-			top:-20px;
+			position:fixed;
+			top:0;
 			background: transparent;
 			color: #fff;
 		}
diff --git a/public_html/data/js/thumbnail-view.js b/public_html/data/js/thumbnail-view.js
index 7bc72a556..f453f4c1c 100644
--- a/public_html/data/js/thumbnail-view.js
+++ b/public_html/data/js/thumbnail-view.js
@@ -30,6 +30,7 @@ define(['jquery', 'underscore', 'jquery.colorbox'], function ($, _) {
 				retinaImage: true,
 				maxHeight: "100%",
 				maxWidth: "100%",
+				title: 'Use h/l or right/left arrow keys or these buttons:',
 				next: '<span class="glyphicon glyphicon-chevron-right"></span>',
 				previous: '<span class="glyphicon glyphicon-chevron-left"></span>',
 				close: '<span class="glyphicon glyphicon-remove"></span>',
diff --git a/public_html/data/js/vendor/jquery.colorbox.js b/public_html/data/js/vendor/jquery.colorbox.js
index f9b676670..4c5025370 100644
--- a/public_html/data/js/vendor/jquery.colorbox.js
+++ b/public_html/data/js/vendor/jquery.colorbox.js
@@ -526,10 +526,10 @@
 						publicMethod.close();
 					}
 					if (open && settings.get('arrowKey') && $related[1] && !e.altKey) {
-						if (key === 37) {
+						if (key === 37 || key == 72) {
 							e.preventDefault();
 							$prev.click();
-						} else if (key === 39) {
+						} else if (key === 39 || key === 76) {
 							e.preventDefault();
 							$next.click();
 						}