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