diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index 2c31480..e707d9f 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -233,9 +233,10 @@ body {
display: inline-block;
position: sticky;
top: 1em;
+ margin-left: calc(var(--gallery-padding-horizontal) * -1);
padding: var(--padding);
- z-index: calc(var(--base-layer) + 1);
+ z-index: calc(var(--base-layer) + 2);
border: solid 1px var(--gallery-secondary-color);
background: var(--gallery-background-color);
diff --git a/grid-n-view.html b/grid-n-view.html
index 962d203..f592c76 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -87,8 +87,8 @@ For more info see: README.md
-
-
+
+
diff --git a/grid-n-view.js b/grid-n-view.js
index 62b3d4b..3526024 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -1078,9 +1078,18 @@ var Overlay = {
&& this.cache_count != 0
&& this.cache() },
+ __clicks_canceled: false,
+ __clicks_canceled_timeout: 500,
+
get shown(){
return this.gallery.dom.classList.contains(this.cls) },
show: function(){
+ var that = this
+ this.__clicks_canceled = true
+ setTimeout(
+ function(){
+ that.__clicks_canceled = false },
+ this.__clicks_canceled_timeout ?? 200)
this.update()
this.gallery.dom.classList.add(this.cls)
return this },
@@ -1130,24 +1139,34 @@ var Overlay = {
this.dom.querySelector('.close')
?.addEventListener('click', function(evt){
evt.stopPropagation()
+ if(that.__clicks_canceled){
+ return }
that.hide() })
this.dom.querySelector('.fullscreen')
?.addEventListener('click', function(evt){
evt.stopPropagation()
+ if(that.__clicks_canceled){
+ return }
document.fullscreenElement ?
document.exitFullscreen()
: that.dom.requestFullscreen() })
this.dom.querySelector('.info')
?.addEventListener('click', function(evt){
evt.stopPropagation()
+ if(that.__clicks_canceled){
+ return }
that.gallery.showDetails() })
this.dom.querySelector('.prev')
?.addEventListener('click', function(evt){
evt.stopPropagation()
+ if(that.__clicks_canceled){
+ return }
that.gallery.prev() })
this.dom.querySelector('.next')
?.addEventListener('click', function(evt){
evt.stopPropagation()
+ if(that.__clicks_canceled){
+ return }
that.gallery.next() })
// stop body from scrolling...
var stop = function(evt){
@@ -1179,7 +1198,7 @@ var Lightbox = {
caption_format: '${INDEX} ${CAPTION}',
- navigation_deadzone: 100,
+ navigation_deadzone: 0.3,
caption_hysteresis: 10,
cache_count: 1,
@@ -1212,25 +1231,39 @@ var Lightbox = {
Overlay.setup.call(this, ...arguments)
// click zones...
- var deadzone = this.navigation_deadzone ?? 100
+ var dblclick_canceled = false
+ var deadzone = this.navigation_deadzone ?? 0.3
this.dom
.addEventListener('click', function(evt){
evt.stopPropagation()
+ if(that.__clicks_canceled){
+ return }
+ var d = that.dom.offsetWidth * deadzone
// click left/right side of view...
// NOTE: this is vewport-relative...
- evt.clientX < that.dom.offsetWidth / 2 - deadzone/2
+ dblclick_canceled = false
+ evt.clientX < that.dom.offsetWidth / 2 - d/2
&& that.gallery.prev()
- evt.clientX > that.dom.offsetWidth / 2 + deadzone/2
- && that.gallery.next() })
+ && (dblclick_canceled = true)
+ evt.clientX > that.dom.offsetWidth / 2 + d/2
+ && that.gallery.next()
+ && (dblclick_canceled = true) })
+ this.dom
+ .addEventListener('dblclick', function(evt){
+ evt.stopPropagation()
+ dblclick_canceled
+ || that.__clicks_canceled
+ || that.hide() })
// hover zones...
var hysteresis = this.caption_hysteresis ?? 10
this.dom
.addEventListener('mousemove', function(evt){
+ var d = that.dom.offsetWidth * deadzone
// indicate action...
- if(evt.clientX < that.dom.offsetWidth / 2 - deadzone/2){
+ if(evt.clientX < that.dom.offsetWidth / 2 - d/2){
that.dom.classList.contains('clickable')
|| that.dom.classList.add('clickable')
- } else if( evt.clientX > that.dom.offsetWidth / 2 + deadzone/2){
+ } else if( evt.clientX > that.dom.offsetWidth / 2 + d/2){
that.dom.classList.contains('clickable')
|| that.dom.classList.add('clickable')
} else {