diff --git a/ui/experiment-ribbon-navigation-n-zoom.html b/ui/experiment-ribbon-navigation-n-zoom.html
index 500d1d8d..c9720fb2 100755
--- a/ui/experiment-ribbon-navigation-n-zoom.html
+++ b/ui/experiment-ribbon-navigation-n-zoom.html
@@ -153,8 +153,8 @@ Guides:
Zoom:
-
-
+
+
diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js
index e22e6dc0..79a53d29 100755
--- a/ui/gallery-prototype.js
+++ b/ui/gallery-prototype.js
@@ -42,7 +42,7 @@ function setupControlElements(){
$('.demote').click(shiftImageUp)
$('.promote').click(shiftImageDown)
$('.toggle-wide').click(toggleWideView)
- $('.toggle-single').click(toggleRibbonView)
+ $('.toggle-single').click(toggleSingleImageMode)
}
@@ -111,7 +111,7 @@ var ZOOM_FACTOR = 2
// XXX need to make this handle modifiers gracefully...
var keys = {
toggleHelp: [72],
- toggleRibbonView: [70],
+ toggleSingleImageMode: [70],
close: [27, 88, 67],
// zooming...
@@ -187,10 +187,10 @@ function handleKeys(event){
}
}()
// zooming...
- : (fn(code, keys.zoomIn) >= 0) ? zoomContainerBy(ZOOM_FACTOR)
- : (fn(code, keys.zoomOut) >= 0) ? zoomContainerBy(1/ZOOM_FACTOR)
+ : (fn(code, keys.zoomIn) >= 0) ? scaleContainerBy(ZOOM_FACTOR)
+ : (fn(code, keys.zoomOut) >= 0) ? scaleContainerBy(1/ZOOM_FACTOR)
// zoom presets...
- : (fn(code, keys.zoomOriginal) >= 0) ? setContainerZoom(1)
+ : (fn(code, keys.zoomOriginal) >= 0) ? setContainerScale(1)
: (fn(code, keys.fitOne) >= 0) ? fitImage()
: (fn(code, keys.fitThree) >= 0) ? fitThreeImages()
@@ -200,7 +200,7 @@ function handleKeys(event){
: (fn(code, keys.moveViewLeft) >= 0) ? moveViewLeft()
: (fn(code, keys.moveViewRight) >= 0) ? moveViewRight()
- : (fn(code, keys.toggleRibbonView) >= 0) ? toggleRibbonView()
+ : (fn(code, keys.toggleSingleImageMode) >= 0) ? toggleSingleImageMode()
: (fn(code, keys.ignore) >= 0) ? false
// XXX
: (keys.helpShowOnUnknownKey) ? function(){alert(code)}()
@@ -236,12 +236,18 @@ function setViewerMode(mode){
// ribbon/single view modes...
+
+var ORIGINAL_FIELD_SCALE = 1
+
// XXX CSS broken...
-function toggleRibbonView(){
+function toggleSingleImageMode(){
if($('.single-image-mode').length > 0){
unsetViewerMode('single-image-mode')
+ setContainerScale(ORIGINAL_FIELD_SCALE)
} else {
setViewerMode('single-image-mode')
+ ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
+ fitImage()
}
}
@@ -250,10 +256,10 @@ function toggleRibbonView(){
// wide view mode toggle...
function toggleWideView(){
if($('.wide-view-mode').length > 0){
- setContainerZoom(1)
+ setContainerScale(1)
$('.viewer').removeClass('wide-view-mode')
} else {
- setContainerZoom(0.1)
+ setContainerScale(0.1)
$('.viewer').addClass('wide-view-mode')
}
}
diff --git a/ui/gallery.html b/ui/gallery.html
index c211824d..2d6987de 100755
--- a/ui/gallery.html
+++ b/ui/gallery.html
@@ -124,7 +124,7 @@ $(document).ready(setup);
-
+
diff --git a/ui/ui.js b/ui/ui.js
index 3db46236..9982ea37 100755
--- a/ui/ui.js
+++ b/ui/ui.js
@@ -37,8 +37,7 @@ function getCurrentVerticalOffset(image){
image = $('.image.current')
}
- //var zoom = $('.field').css('zoom')
- var zoom = getElementScale($('.field'))
+ var scale = getElementScale($('.field'))
var ribbons = $('.ribbon')
var ribbon = image.parents('.ribbon')
@@ -68,8 +67,7 @@ function getCurrentHorizontalOffset(image){
image = $('.image.current')
}
- //var zoom = $('.field').css('zoom')
- var zoom = getElementScale($('.field'))
+ var scale = getElementScale($('.field'))
var ribbon = image.parents('.ribbon')
var images = ribbon.children('.image')
@@ -175,13 +173,12 @@ function centerOrigin(){
// XXX need to make this work for % values...
// XXX make this usable as an event handler for .resize(...) event...
-// XXX this does not account for zoom correctly...
+// XXX this does not account for scale correctly...
function fieldSize(W, H){
var oW = $('.container').width()
var oH = $('.container').height()
- //var zoom = $('.field').css('zoom')
- var zoom = getElementScale($('.field'))
+ var scale = getElementScale($('.field'))
$('.container').css({
'width': W,
@@ -240,22 +237,22 @@ function setElementScale(elem, scale){
}
// XXX this appears to be broken -- for some reason the current scale does not change...
-function zoomContainerBy(factor){
- var zoom = getElementScale($('.field'))*factor
+function scaleContainerBy(factor){
+ var scale = getElementScale($('.field'))*factor
- setContainerZoom(zoom)
+ setContainerScale(scale)
}
-function setContainerZoom(zoom){
+function setContainerScale(scale){
var H = $('.container').height()
var W = $('.container').width()
$('.field').css({
- 'transform': 'scale('+zoom+', '+zoom+')',
- '-moz-transform': 'scale('+zoom+', '+zoom+')',
- '-o-transform': 'scale('+zoom+', '+zoom+')',
- '-ms-transform': 'scale('+zoom+', '+zoom+')',
- '-webkit-transform': 'scale('+zoom+', '+zoom+')',
+ 'transform': 'scale('+scale+', '+scale+')',
+ '-moz-transform': 'scale('+scale+', '+scale+')',
+ '-o-transform': 'scale('+scale+', '+scale+')',
+ '-ms-transform': 'scale('+scale+', '+scale+')',
+ '-webkit-transform': 'scale('+scale+', '+scale+')',
})
}
@@ -268,7 +265,7 @@ function fitImage(){
var f = Math.min(H/h, W/w)
- setContainerZoom(f)
+ setContainerScale(f)
}
function fitThreeImages(){
@@ -281,6 +278,6 @@ function fitThreeImages(){
var f = Math.min(H/h, W/w)
- setContainerZoom(f)
+ setContainerScale(f)
}