From f48c000aa364302bb692852fca6dee4d8dc2286f Mon Sep 17 00:00:00 2001 From: Florian Pritz Date: Tue, 4 Aug 2015 23:43:57 +0200 Subject: Improve colorbox navigation and document it - 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 --- public_html/data/css/colorbox.css | 6 +++--- public_html/data/js/thumbnail-view.js | 1 + public_html/data/js/vendor/jquery.colorbox.js | 4 ++-- 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: '', previous: '', close: '', 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(); } -- cgit v1.2.3-24-g4f1b