minor tweaks

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

css/grid-n-view.css

@@ -22,6 +22,7 @@
 
 	--lightbox-text-color: black;
 	--lightbox-background-color: white;
+	/*--lightbox-background-color: rgba(0,0,0,0.8);*/
 }
 
 .gallery-dark {
@@ -80,9 +81,8 @@ body {
 	width: auto;
 	image-rendering: crisp-edges;
 	box-sizing: border-box;
-}
-.gallery .images img {
-	cursor: hand;
+
+	cursor: pointer;
 }
 .gallery .images img.current {
 	border: solid 2px red;
@@ -134,7 +134,7 @@ body {
 	left: 0.5em;
 }
 .gallery .lightbox.clickable {
-	cursor: hand;
+	cursor: pointer;
 }
 /* XXX add metadata display... */
 .gallery .lightbox img {
@@ -150,14 +150,14 @@ body {
 		* var(--lightbox-image-margin-top)); 
 }
 /* controls: next/prev... */
-.lightbox .button {
-	cursor: hand;
+.gallery .lightbox .button {
+	cursor: pointer;
 	font-size: var(--lightbox-button-size);
 	padding: 0 0.25em;
 	filter: saturate(0);
 	opacity: 0.1;
 }
-.lightbox .button:hover {
+.gallery .lightbox .button:hover {
 	opacity: 1;
 	filter: saturate(1);
 }

grid-n-view.js

@@ -135,6 +135,18 @@ var keyboard = {
 //---------------------------------------------------------------------
 
 var Gallery = {
+	code: `
+		<div class="gallery">
+			<!-- gallery: content -->
+			<div class="images">
+			</div>
+			<!-- lightbox -->
+			<div class="lightbox">
+				<img>
+				<div class="button close"></div>
+			</div>
+		</div>`,
+
 	dom: undefined,
 
 	__lightbox: undefined,
@@ -378,12 +390,10 @@ var Gallery = {
 		var that = this
 		this.dom = dom
 
-		this.dom
+		this.dom.querySelector('.images')
 			.addEventListener('click', function(evt){
 				var target = evt.target
-				if(target.tagName == 'IMG' 
-						// skip images in lightbox...
-						&& target.parentElement === that.dom){
+				if(target.tagName == 'IMG'){
 					that.current = target
 					that.show() } })
 
@@ -494,7 +504,7 @@ var Lightbox = {
 					&& that.prev()
 				evt.clientX > that.dom.offsetWidth / 2 + deadzone/2
 					&& that.next() })
-		// mouseofver...
+		// mousemove...
 		var hysteresis = this.caption_hysteresis ?? 10
 		this.dom
 			.addEventListener('mousemove', function(evt){