added an experiment for fading images...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/TODO.otl

@@ -1,5 +1,9 @@
 Priority work
-	[_] 93% Preview II
+	[_] 85% Preview II
+		[_] load higher resolution images OVER lower res to avoid "blackouts"
+		| plus, might be good to keep the low-res versions loaded...
+		|
+		| this can either be done via pre-loading or double layering...
 		[_] 38% native client
 			[_] 0% Generic
 				[_] default settings in platform-specific JSON file

ui/experiments/css-overlay.html

@@ -0,0 +1,47 @@
+
+
+
+<style>
+
+.image, .overlay:after, .elem-overlay {
+	width: 350px;
+	height: 350px;
+}
+
+.image {
+	position: absolute;
+	top: 50px;
+	left: 50px;
+	background: no-repeat 50% black;
+	background-size: contain;
+	background-image: url('../images/350px/DSC_3506.jpg');
+
+	/* this sets the opacity on both the image and :after */
+	opacity: 0.5;
+}
+
+.overlay:after, .elem-overlay {
+	display: block;
+	content: '';
+	position: absolute;
+	background: no-repeat 50% blue;
+	background-size: contain;
+
+	/* sets the opacity only for the :after */
+	opacity: 0.5;
+}
+
+.image:nth-child(2) {
+	display: inline-block;
+	left: 500px;
+}
+
+
+</style>
+
+
+
+<div class="image overlay"></div>
+
+
+<div class="image"><div class="elem-overlay"></div>

ui/gallery-prototype.js

@@ -1194,11 +1194,12 @@ function makeImage(order, set_order){
 	}
 	return (setupImageEventHandlers(
 				set_order($('<div class="image"/>')
+				//set_order($('<div class="image"><div class="image-overlay"/></div>')
 					, order)))
 }
 
 
-// NOTE: if there is not id image this will return null
+// NOTE: if there is no id image this will return null
 function getImageData(id){
 	var json = ImageGrid.image_data
 	var ribbons = json.ribbons
@@ -1211,6 +1212,7 @@ function getImageData(id){
 	}
 }
 
+// Get a preview url of apropriate size...
 // NOTE: this is largely independent of ImageGrid.image_data structure, 
 // 		it needs only content...
 function getURL(id, size){
@@ -1248,6 +1250,26 @@ function getURL(id, size){
 	}
 }
 
+function updateImage(img, size){
+	var id = img.attr('id')
+	var overlay = $('#'+id+' .image-overlay')
+	// create an overlay with the same image...
+	// XXX do we need to create the overlay each time???
+	overlay
+		.css({
+			'background-image': img.css('background-image'),
+		})
+		.show()
+	img
+		.css({ 
+		'background-image': 'url('+getURL(id, size)+')'
+		})
+		// when the new image loads, fadeout the overlay remove it...
+		.ready(function(){
+				overlay.fadeOut()
+		})
+}
+
 
 
 var SCREEN_WIDTH_CACHE = 4
@@ -1282,7 +1304,7 @@ function updateRibbonImages(img, force){
 		// XXX update images on zoom...
 		var bg = img.css('background-image')
 		if(force || bg == 'none' || bg == null){
-			img.css({ 'background-image': 'url('+getURL(img.attr('id'), size)+')' })
+			updateImage(img, size)
 		}
 		//img.not('.loaded').css({ 'background-image': 'url('+getURL(img.attr('id'))+')' })
 		// remove the processed images from the list...

ui/gallery.css

@@ -109,7 +109,7 @@
 }
 
 
-.image, .current-indicator {
+.image, .image-overlay, .current-indicator {
 	width: 350px;
 	height: 350px;
 }
@@ -123,8 +123,19 @@
 	opacity: 0.3;
 
 	cursor: hand;
+}	
+
+.image-overlay {
+	position: absolute;
+	display: none;
+	content: '';
+	top: 0px;
+	left: 0px;
+	background: no-repeat 50% black;
+	background-size: contain;
 }
 
+
 .current-indicator {
 	display: none;
 	cursor: hand;