flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-11-01 03:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

tested image zooming...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-07-19 14:29:31 +04:00
parent 2e90687600
commit da9cd48454
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/TODO.otl
View File

@ -30,7 +30,7 @@ Priority work
| from the left of the axis and likewise for the right side. | from the left of the axis and likewise for the right side.
| |
[X] stage I: position the promoted/demoted image correctly [X] stage I: position the promoted/demoted image correctly
[_] 0% stage II: scroll ribbons correctly [_] stage II: scroll ribbons correctly
| this is simple: | this is simple:
| - center the right edge of image returned | - center the right edge of image returned
| by getImageBefore in all ribbons other than current... | by getImageBefore in all ribbons other than current...

11
ui/experiment-ribbon-navigation-n-zoom.html
View File

@ -181,6 +181,7 @@ function zoom(factor){
width: 50px; width: 50px;
height: 50px; height: 50px;
background: silver; background: silver;
color: white;
float: left; float: left;
/* animate */ /* animate */
@ -191,8 +192,14 @@ function zoom(factor){
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.image {
background: no-repeat 50% black;
background-size: contain;
background-image: url(images/350px/DSC_3501.jpg);
}
.current.square { .current.square {
background: gray; background-color: gray;
} }
@ -239,7 +246,7 @@ function zoom(factor){
<div class="square">2</div> <div class="square">2</div>
<div class="square">3</div> <div class="square">3</div>
<div class="square">4</div> <div class="square">4</div>
<div class="square">5</div> <div class="square image">5</div>
<div class="square">6</div> <div class="square">6</div>
<div class="square">7</div> <div class="square">7</div>
</div> </div>