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

fixed several bugs...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2012-07-19 17:35:15 +04:00
parent b8620d1ea8
commit 5d78b6bf81
1 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,8 @@ function containerSize(W, H){
var oW = $('.meta-container').width() var oW = $('.meta-container').width()
var oH = $('.meta-container').height() var oH = $('.meta-container').height()
var zoom = $('.container').css('zoom')
$('.meta-container').css({ $('.meta-container').css({
'width': W, 'width': W,
'height': H 'height': H
@ -34,8 +36,12 @@ function containerSize(W, H){
// shift the field... // shift the field...
$('.container').css({ $('.container').css({
'margin-top': parseFloat($('.container').css('margin-top')) + (H-oH)/2, // compensate top/left that get changed while zooming....
'margin-left': parseFloat($('.container').css('margin-left')) + (W-oW)/2 'top': H/2 * 1/zoom - H/2,
'left': W/2 * 1/zoom - W/2,
'margin-top': (parseFloat($('.container').css('margin-top')) + (H-oH)/2),
'margin-left': (parseFloat($('.container').css('margin-left')) + (W-oW)/2)
}) })
} }
@ -89,6 +95,8 @@ function getCurrentVerticalOffset(square){
square = $('.square.current') square = $('.square.current')
} }
var zoom = $('.container').css('zoom')
var ribbons = $('.ribbon') var ribbons = $('.ribbon')
var ribbon = square.parents('.ribbon') var ribbon = square.parents('.ribbon')
var squares = ribbon.children('.square') var squares = ribbon.children('.square')
@ -117,6 +125,8 @@ function getCurrentHorizontalOffset(square){
square = $('.square.current') square = $('.square.current')
} }
var zoom = $('.container').css('zoom')
var ribbon = square.parents('.ribbon') var ribbon = square.parents('.ribbon')
var squares = ribbon.children('.square') var squares = ribbon.children('.square')
@ -179,9 +189,13 @@ function alignRibbon(square, position){
// XXX need to fix animation jumping around... // XXX need to fix animation jumping around...
// XXX try transition-origin instead of compensating by moving... // XXX try transition-origin instead of compensating by moving...
function zoom(factor){ function zoomContainerBy(factor){
var zoom = $('.container').css('zoom')*factor var zoom = $('.container').css('zoom')*factor
setContainerZoom(zoom)
}
function setContainerZoom(zoom){
var H = $('.meta-container').height() var H = $('.meta-container').height()
var W = $('.meta-container').width() var W = $('.meta-container').width()
@ -194,6 +208,31 @@ function zoom(factor){
}) })
} }
function fitImage(){
var H = $('.meta-container').height()
var W = $('.meta-container').width()
var h = $('.square.current').height()
var w = $('.square.current').width()
var f = Math.min(H/h, W/w)
setContainerZoom(f)
}
function fitThreeImages(){
var H = $('.meta-container').height()
var W = $('.meta-container').width()
var h = $('.square.current').height()
// XXX cheating, need to get three widths...
var w = $('.square.current').width()*3
var f = Math.min(H/h, W/w)
setContainerZoom(f)
}
</script> </script>
<style> <style>
@ -291,8 +330,11 @@ function zoom(factor){
</style> </style>
Zoom: <button onclick="zoom(2)">+</button> Zoom: <button onclick="zoomContainerBy(2)">+</button>
<button onclick="zoom(0.5)">-</button> <button onclick="zoomContainerBy(0.5)">-</button>
<button onclick="setContainerZoom(1)">Original</button>
<button onclick="fitImage()">Image</button>
<button onclick="fitThreeImages()">Three</button>
<br> <br>
Size: Size: