diff --git a/css/grid-n-view.css b/css/grid-n-view.css
index d98fd29..2c723ad 100644
--- a/css/grid-n-view.css
+++ b/css/grid-n-view.css
@@ -88,6 +88,10 @@ body {
color: var(--gallery-text-color);
background: var(--gallery-background-color);
}
+.gallery.lightboxed {
+ --base-layer: 100;
+}
+
.gallery .images {
position: relative;
display: flex;
@@ -118,16 +122,13 @@ body {
}
/* hover... */
-/* XXX Problems:
- - this hides marks...
- - shown over lightbox...
-*/
-.gallery .images img:not(.current):hover {
- z-index: 20;
+/* XXX seems a bit convoluted */
+.gallery:not(.lightboxed) .images img:not(.current):hover {
+ z-index: calc(var(--base-layer) + 1);
box-shadow: 0.2em 0.2em 1em 0em rgba(0,0,0,0.8);
}
-.gallery .images img.current:hover {
- z-index: 20;
+.gallery:not(.lightboxed) .images img.current:hover {
+ z-index: calc(var(--base-layer) + 1);
box-shadow:
0px 0px 0px var(--gallery-current-image-border) rgba(255,255,255,1),
0.6em 0.6em 4em 0em rgba(0,0,0,0.8);
@@ -141,8 +142,14 @@ body {
z-index: var(--base-layer);
position: relative;
}
+.gallery .images img:hover+.mark {
+ z-index: calc(var(--base-layer) + 1);
+}
+.gallery.lightboxed .images img:not(.current)+.mark {
+ display: none;
+}
.gallery.lightboxed .images img.current+.mark {
- z-index: calc(var(--base-layer) + 10);
+ z-index: calc(var(--base-layer) + 1);
position: fixed;
bottom: 0;
right: 0;
@@ -171,8 +178,6 @@ body {
/******************************************************* Lightbox ****/
.gallery .lightbox {
- --base-layer: 100;
-
display: none;
position: fixed;
width: 100%;
diff --git a/grid-n-view.html b/grid-n-view.html
index e44a290..223b900 100644
--- a/grid-n-view.html
+++ b/grid-n-view.html
@@ -20,7 +20,6 @@
ToDo
-- ASAP: CSS: z-index needs fixing...
- Views:
- Gallery
- Details
@@ -77,11 +76,11 @@
-
+
-
+
diff --git a/grid-n-view.js b/grid-n-view.js
index af30223..68f2468 100644
--- a/grid-n-view.js
+++ b/grid-n-view.js
@@ -309,10 +309,16 @@ var Gallery = {
get index(){
return this.images.indexOf(this.current) },
- getRow: function(img, direction='current'){
+ getRow: function(img, direction='current', images){
if(['above', 'current', 'below'].includes(img)){
+ images = direction
direction = img
img = this.current }
+ if(direction instanceof Array){
+ images = direction
+ direction = null }
+ direction ??= 'current'
+ images ??= this.images
// get above/below row...
// XXX these are wastefull...
if(direction == 'above'){
@@ -323,7 +329,7 @@ var Gallery = {
return e ?
this.getRow(e)
: this.loop_images ?
- this.getRow(this.images.at(-1))
+ this.getRow(images.at(-1))
: undefined
} else if(direction == 'below'){
// special case: nothing marked...
@@ -336,14 +342,14 @@ var Gallery = {
return e ?
this.getRow(e)
: this.loop_images ?
- this.getRow(this.images[0])
+ this.getRow(images[0])
: undefined }
// get current row...
var cur = img
?? this.current
if(cur == null){
var scroll = getScrollParent(this.dom).scrollTop
- var images = this.images
+ var images = images
for(cur of images){
if(cur.offsetTop >= scroll){
break } } }
@@ -364,19 +370,27 @@ var Gallery = {
e = e.previousElementSibling } }
return row },
// XXX add .loop_images support???
- getImage: function(img, direction='current'){
+ getImage: function(img, direction='current', images){
+ // .getImage(direction[, images])
if(['left', 'above', 'current', 'below', 'right'].includes(img)){
+ images = direction
direction = img
img = null }
+ // .getImage(img, images)
+ if(direction instanceof Array){
+ images = direction
+ direction = null }
+ direction ??= 'current'
+ images ??= this.images
// current...
if(direction == 'current'){
return img
?? this.current
- ?? this.getRow(img)[0]
+ ?? this.getRow(img, images)[0]
// above/below...
// get image with closest center to target image center...
} else if(direction == 'above' || direction == 'below'){
- var row = this.getRow(direction)
+ var row = this.getRow(direction, images)
if(row == null){
return undefined }
var cur = this.current
@@ -406,7 +420,7 @@ var Gallery = {
target = img } }
// left/right...
} else {
- var row = this.getRow(img)
+ var row = this.getRow(img, images)
var i = row.indexOf(
img
?? this.current
@@ -423,8 +437,8 @@ var Gallery = {
return target },
// XXX cache image list???
- prev: function(){
- var images = this.images
+ prev: function(images){
+ images ??= this.images
var i = this.current == null ?
images.length-1
: images.indexOf(this.current)-1
@@ -435,8 +449,8 @@ var Gallery = {
: 0
this.current = images[i]
return this },
- next: function(){
- var images = this.images
+ next: function(images){
+ images ??= this.images
var i = this.current == null ?
0
: images.indexOf(this.current)+1
@@ -449,29 +463,30 @@ var Gallery = {
return this },
// navigate images visually...
- left: function(){
+ // XXX these seem not to work with passed list of images...
+ left: function(images){
var cur = this.current
- var row = this.getRow(cur)
+ var row = this.getRow(cur, images)
var i = row.indexOf(cur) - 1
this.current = row[i < 0 ?
row.length-1
: i]
return this },
- right: function(){
+ right: function(images){
var cur = this.current
- var row = this.getRow(cur)
+ var row = this.getRow(cur, images)
var i = row.indexOf(cur) + 1
this.current = row[i >= row.length ?
0
: i]
return this },
- up: function(){
- var img = this.getImage('above')
+ up: function(images){
+ var img = this.getImage('above', images)
img
&& (this.current = img)
return this },
- down: function(){
- var img = this.getImage('below')
+ down: function(images){
+ var img = this.getImage('below', images)
img
&& (this.current = img)
return this },
@@ -679,6 +694,7 @@ var Gallery = {
.observe(this.dom)
return this
+ .updateMarkers()
.update() },
}