diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index d6cef7da..688c354b 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -177,10 +177,20 @@ function handleKeys(event){ // modes... function showRibbon(){ - $('.single-image-mode').removeClass('single-image-mode') + $('.single-image-mode') + .removeClass('single-image-mode') + .one("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(){ + $('.current-image').click() + return true + }); } function showSingle(){ - $('.viewer').not('.single-image-mode').addClass('single-image-mode') + $('.viewer').not('.single-image-mode') + .addClass('single-image-mode') + .one("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(){ + $('.current-image').click() + return true + }); } function toggleRibbonView(){ if($('.single-image-mode').length > 0){ diff --git a/ui/gallery.css b/ui/gallery.css index a8cdc9c2..18cbdff3 100755 --- a/ui/gallery.css +++ b/ui/gallery.css @@ -58,7 +58,7 @@ transition: all 0.5s ease; } .single-image-mode .controller { - opacity: 0.2; + opacity: 0.8; } .promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single { text-align: center; @@ -97,6 +97,12 @@ overflow: hidden; width: 800px; height: 500px; + + -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; } .field { @@ -164,16 +170,29 @@ * * XXX need to make this touch friendly... */ +.single-image-mode .container { + background: gray; +} + .single-image-mode .image { opacity: 0.0; + /* XXX need to fix animation with this... */ + position: absolute; + left: 0px; } .single-image-mode .image:hover { - opacity: 0.5; + /*opacity: 0.5;*/ + /* XXX need to fix animation with this... */ + position: absolute; + left: 0px; } .single-image-mode .current-image:hover, .single-image-mode .current-image { opacity: 1.0; + /* XXX need to fix animation with this... */ + position: absolute; + left: 0px; }