flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 10:20:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

modified single image mode style...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-06-08 19:35:05 +04:00
parent c9a9259d59
commit bc68d68966
2 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/gallery-prototype.js
View File

@ -177,10 +177,20 @@ function handleKeys(event){
// modes... // modes...
function showRibbon(){ 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(){ 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(){ function toggleRibbonView(){
if($('.single-image-mode').length > 0){ if($('.single-image-mode').length > 0){

23
ui/gallery.css
View File

@ -58,7 +58,7 @@
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.single-image-mode .controller { .single-image-mode .controller {
opacity: 0.2; opacity: 0.8;
} }
.promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single { .promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single {
text-align: center; text-align: center;
@ -97,6 +97,12 @@
overflow: hidden; overflow: hidden;
width: 800px; width: 800px;
height: 500px; 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 { .field {
@ -164,16 +170,29 @@
* *
* XXX need to make this touch friendly... * XXX need to make this touch friendly...
*/ */
.single-image-mode .container {
background: gray;
}
.single-image-mode .image { .single-image-mode .image {
opacity: 0.0; opacity: 0.0;
/* XXX need to fix animation with this... */
position: absolute;
left: 0px;
} }
.single-image-mode .image:hover { .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 { .single-image-mode .current-image:hover, .single-image-mode .current-image {
opacity: 1.0; opacity: 1.0;
/* XXX need to fix animation with this... */
position: absolute;
left: 0px;
} }