diff --git a/css/grid-n-view.css b/css/grid-n-view.css index 2d7dbb3..ee4619f 100644 --- a/css/grid-n-view.css +++ b/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); } diff --git a/grid-n-view.js b/grid-n-view.js index 0da54fb..db4af85 100644 --- a/grid-n-view.js +++ b/grid-n-view.js @@ -135,6 +135,18 @@ var keyboard = { //--------------------------------------------------------------------- var Gallery = { + code: ` + `, + 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){