diff --git a/ui/gallery.html b/ui/gallery.html index c4d650bb..fde6c7fb 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -47,7 +47,7 @@ ISSUES: - + @@ -65,6 +65,7 @@ $(document).ready(function() { // setup event handlers... $(document) .keydown(handleKeys) + $('.viewer') // XXX this is flaky and breaks some of my code... /*.wipetouch({ wipeLeft: nextImage, @@ -75,7 +76,7 @@ $(document).ready(function() { tapToClick: true })*/ // XXX does not work on android... - //.gestures({eventHandler: handleGestures}) + .gestures({eventHandler: handleGestures}) /* XXX jquery.mobile handlers... (with this I'm getting way too much bling) .bind('swipeleft', function(e){ nextImage() @@ -90,6 +91,13 @@ $(document).ready(function() { */ $(".image").click(handleClick) + $('.next-image').click(nextImage) + $('.prev-image').click(prevImage) + $('.demote').click(demoteImage) + $('.promote').click(promoteImage) + $('.toggle-wide').click(toggleWideView) + $('.toggle-single').click(toggleRibbonView) + // set the default position... $('.current-image').click() }); @@ -155,6 +163,7 @@ var keys = { previousKeys: [37, 80], nextKeys: [39, 78], promoteKeys: [40], + // XXX add del (46) to demote... demoteKeys: [38], ignoreKeys: [16, 17, 18], @@ -406,7 +415,68 @@ function demoteImage(){ background: blue; } + .demo-buttons { + margin: 15px + border: groove 2px; + + opacity: 0.2; + + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + transition: all 0.5s ease; + } + .demo-buttons:hover { + opacity: 1; + } + + .viewer { + width: 900px; + height: 500px; + border: solid blue 5px; + margin: 20px; + } + .controller { + height: 500px; + width: 50px; + background: silver; + float: left; + } + .promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single { + text-align: center; + vertical-align: middle; + width: 100%; + height: 150px; + background: gray; + + -moz-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + -ms-user-select: none; + user-select: none; + } + .next-image, .prev-image, .toggle-wide, .toggle-single { + background: silver; + } + .toggle-wide, .toggle-single { + height:50px + } + .promote { + } + .next-image { + } + .prev-image { + } + .demote { + } + .toggle-wide { + } + .toggle-single { + } + .container { + float: left; overflow: hidden; width: 800px; height: 500px; @@ -516,74 +586,91 @@ function demoteImage(){ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
^
+
<
+
v
+
[ ]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
^
+
>
+
v
+
+/-
+
- - - - +
-

+ + + + - - - +

-

+ + + - +

-

+ -
- +

-

+
+ -
- +

-

+
+ -
-
-NOTE: ctrl-shift-up / ctrl-shift-down will demote / promote an image to a new empty ribbon (the default if no ribbon exists) +

-

+
+
+ NOTE: ctrl-shift-up / ctrl-shift-down will demote / promote an image to a new empty ribbon (the default if no ribbon exists) -
- +

+
+ + +