flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +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...
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){

23
ui/gallery.css
View File

@ -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;
}