diff --git a/ui (gen4)/experiments/centering-and-alignment.html b/ui (gen4)/experiments/centering-and-alignment.html
index 68d8d972..1b43107b 100755
--- a/ui (gen4)/experiments/centering-and-alignment.html
+++ b/ui (gen4)/experiments/centering-and-alignment.html
@@ -45,7 +45,7 @@
transform-origin: top left;
- transition: all 0.1s linear;
+ transition: transform 0.1s linear;
}
.ribbon-mover {
position: relative;
@@ -53,7 +53,7 @@
top: 0px;
left: 0px;
- transition: all 0.1s linear;
+ transition: transform 0.1s linear;
}
/*
@@ -74,7 +74,7 @@
background: black;
- transition: all 0.1s linear;
+ transition: transform 0.1s linear;
/* XXX use vmin here... */
margin-top: 2.5px;
@@ -118,6 +118,14 @@
}
+.single-image-mode .ribbon {
+ background: transparent;
+}
+.single-image-mode .image:not(.current) {
+ visibility: hidden;
+}
+
+
@@ -164,6 +172,30 @@ $(function(){
})
+ var ribbon_scale
+ var single_scale
+
+ $('.single-image-toggle')
+ .click(function(){
+ var ribbon_set = $('.ribbon-set')
+
+ if($('.viewer').hasClass('single-image-mode')){
+ single_scale = ribbon_set.attr('scale') || 5
+ } else {
+ ribbon_scale = ribbon_set.attr('scale') || 1
+ }
+
+ $('.viewer').toggleClass('single-image-mode')
+
+ if($('.viewer').hasClass('single-image-mode')){
+ ribbon_set.attr('scale', single_scale || 5)
+ } else {
+ ribbon_set.attr('scale', ribbon_scale || 1)
+ }
+
+ $('.current.image').click()
+ })
+
$('.zoom-reset')
.click(function(){
@@ -217,7 +249,8 @@ $(function(){
-
+
+