From da9cd484546b88a9a48a30fceabf3fb82fdf0121 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Thu, 19 Jul 2012 14:29:31 +0400
Subject: [PATCH] tested image zooming...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/TODO.otl                                 |  2 +-
 ui/experiment-ribbon-navigation-n-zoom.html | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/ui/TODO.otl b/ui/TODO.otl
index aab46539..54e4d6c8 100755
--- a/ui/TODO.otl
+++ b/ui/TODO.otl
@@ -30,7 +30,7 @@ Priority work
 		| 		from the left of the axis and likewise for the right side. 
 		|
 			[X] stage I: position the promoted/demoted image correctly
-			[_] 0% stage II: scroll ribbons correctly
+			[_] stage II: scroll ribbons correctly
 			| this is simple:
 			| - center the right edge of image returned
 			|   by getImageBefore in all ribbons other than current...
diff --git a/ui/experiment-ribbon-navigation-n-zoom.html b/ui/experiment-ribbon-navigation-n-zoom.html
index ffd0e3ec..1ebebefc 100755
--- a/ui/experiment-ribbon-navigation-n-zoom.html
+++ b/ui/experiment-ribbon-navigation-n-zoom.html
@@ -181,6 +181,7 @@ function zoom(factor){
 	width: 50px;
 	height: 50px;
 	background: silver;
+	color: white;
 	float: left;
 
 	/* animate */
@@ -191,8 +192,14 @@ function zoom(factor){
 	transition: all 0.5s ease;
 }
 
+.image {
+	background: no-repeat 50% black;
+	background-size: contain;
+	background-image: url(images/350px/DSC_3501.jpg);
+}
+
 .current.square {
-	background: gray;
+	background-color: gray;
 }
 
 
@@ -239,7 +246,7 @@ function zoom(factor){
 			<div class="square">2</div>
 			<div class="square">3</div>
 			<div class="square">4</div>
-			<div class="square">5</div>
+			<div class="square image">5</div>
 			<div class="square">6</div>
 			<div class="square">7</div>
 		</div>