diff --git a/css/grid-n-view.css b/css/grid-n-view.css index ee4619f..628294f 100644 --- a/css/grid-n-view.css +++ b/css/grid-n-view.css @@ -80,22 +80,26 @@ body { height: 300px; width: auto; image-rendering: crisp-edges; - box-sizing: border-box; cursor: pointer; } + +/* selection marker... */ .gallery .images img.current { - border: solid 2px red; + z-index: 1; + box-shadow: 0px 0px 0px 5px rgba(255,0,0,0.8); } /*************************************************** Image markers ***/ .gallery .images img+.mark { + z-index: 1; position: relative; } /* marker: selected */ +.gallery .lightbox.selected:after, .gallery .images img+.mark.selected:after { content: ""; position: absolute; @@ -121,6 +125,7 @@ body { height: 100%; top: 0px; left: 0px; + z-index: 1; text-align: center; diff --git a/grid-n-view.html b/grid-n-view.html index f0a06a5..e5aafee 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -22,11 +22,11 @@
 - Gallery: Adaptable image justification in grid
 	- Can we make this passive??? (i.e. CSS only)
-	- Make more accurate -- align right side to pixel...
+	- Make more accurate -- align right side to pixel...
 - Gallery: Spacial navigation (up/down/left/right)
 	- Up/Down: might be a good idea to err slightly to the left
 - Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)
-	- Lightbox: show selection marker
+	- Lightbox: show selection marker
 - Gallery: constructor (list of urls)
 - Gallery: views
 	- "make view from selection"
diff --git a/grid-n-view.js b/grid-n-view.js
index db4af85..99ac9f7 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -19,8 +19,9 @@
 
 // XXX need to account for scrollbar -- add hysteresis???
 var patchFlexRows = 
-function(elems){
-	var W = elems[0].parentElement.clientWidth - 2
+function(elems, prevent_row_expansion=false){
+	// NOTE: -1 here is to compensate for rounding errors...
+	var W = elems[0].parentElement.clientWidth - 1
 	var w = 0
 	var h
 	var row = []
@@ -37,21 +38,26 @@ function(elems){
 		if(elem.offsetTop == top){
 			w += elem.offsetWidth
 			row.push(elem)
-		// next row...
+		// row donw + prep for next...
 		} else {
 			// NOTE: we are checking which will require a lesser resize
 			//		the current row or it with the next image...
 			var r1 = W / w
 			var r2 = W / (w + elem.offsetWidth)
-			var expanded_row = 1/r1 < r2
+			var expanded_row = 
+				prevent_row_expansion ?
+					false
+					: 1/r1 < r2
 			if(!expanded_row){
 				var r = r1
 			} else {
 				var r = r2
 				row.push(elem) }
 			// patch the row...
+			var nw = 0
 			for(var e of row){
-				e.style.height = Math.floor(h * r) + 'px' }
+				e.style.height = (h * r) + 'px' 
+				nw += e.offsetWidth }
 			// prep for next row...
 			if(!expanded_row){
 				w = elem.offsetWidth
@@ -135,6 +141,9 @@ var keyboard = {
 //---------------------------------------------------------------------
 
 var Gallery = {
+
+	allow_row_expansion: true,
+
 	code: `