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

added zooming to experiment, animation still odd...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-07-19 02:34:04 +04:00
parent 287b5c8f96
commit 05a916d834
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ui/experiment-ribbon-navigation-mechanics-n-structure.html
View File

@ -55,7 +55,8 @@ function centerSquare(zoom){
// relative position to container... // relative position to container...
// XXX is there a better way to get this? // XXX is there a better way to get this?
var t = rn * (h - mh/2) var t = rn * (h - mh/2)
$('.container').css({'margin-top': (-t + H/zoom/2 + h/2)}) //$('.container').css({'margin-top': (-t + H/zoom/2 + h/2)})
$('.container').css({'margin-top': (-t + H/2 + h/2)})
// horizontal... // horizontal...
alignRibbon() alignRibbon()
@ -89,24 +90,43 @@ function alignRibbon(square, position, zoom){
switch(position){ switch(position){
case 'before': case 'before':
ribbon.css({'margin-left': (-l + W/zoom/2 + w)}) //ribbon.css({'margin-left': (-l + W/zoom/2 + w)})
ribbon.css({'margin-left': (-l + W/2 + w)})
return true return true
case 'center': case 'center':
ribbon.css({'margin-left': (-l + W/zoom/2 + w/2)}) //ribbon.css({'margin-left': (-l + W/zoom/2 + w/2)})
ribbon.css({'margin-left': (-l + W/2 + w/2)})
return true return true
case 'after': case 'after':
ribbon.css({'margin-left': (-l + W/zoom/2)}) //ribbon.css({'margin-left': (-l + W/zoom/2)})
ribbon.css({'margin-left': (-l + W/2)})
return true return true
} }
return false return false
} }
// XXX need to compensate for zoom-shift (container.margin-top & ribbon.margin-left)... // XXX need to fix animation jumping around...
function zoomIn(){ function zoomIn(){
$('.container').css({'zoom': $('.container').css('zoom') * 2}) var zoom = $('.container').css('zoom')*2
var H = $('.meta-container').height()
var W = $('.meta-container').width()
$('.container').animate({
'zoom': zoom,
'top': H/2 * 1/zoom - H/2,
'left': W/2 * 1/zoom - W/2,
})
} }
function zoomOut(){ function zoomOut(){
$('.container').css({'zoom': $('.container').css('zoom') * 0.5}) var zoom = $('.container').css('zoom')*0.5
var H = $('.meta-container').height()
var W = $('.meta-container').width()
$('.container').animate({
'zoom': zoom,
'top': H/2 * 1/zoom - H/2,
'left': W/2 * 1/zoom - W/2,
})
} }
@ -138,6 +158,9 @@ function zoomOut(){
} }
.container { .container {
position: relative;
top: 0px;
left: 0px;
/* set this to adjust the vertical position of the view... */ /* set this to adjust the vertical position of the view... */
margin-top: -50px; margin-top: -50px;