fixed layering, working on subset navigation...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
ad2d9455e7
commit
ac95265b64
@ -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%;
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
|
||||
<h3>ToDo</h3>
|
||||
<pre>
|
||||
- <b>ASAP: CSS: z-index needs fixing...</b>
|
||||
- Views:
|
||||
- <s>Gallery</s>
|
||||
- <b>Details</b>
|
||||
@ -77,11 +76,11 @@
|
||||
<div class="images">
|
||||
<img src="images/500px/1.JPG" caption="Caption text">
|
||||
<img src="images/500px/2.JPG">
|
||||
<img src="images/500px/3.JPG">
|
||||
<img src="images/500px/3.JPG" class="marked">
|
||||
<img src="images/500px/DSC08102.jpg">
|
||||
<img src="images/500px/4.JPG">
|
||||
<img src="images/500px/5.JPG">
|
||||
<img src="images/500px/DSC08102.jpg">
|
||||
<img src="images/500px/DSC08102.jpg" class="marked">
|
||||
<img src="images/500px/6.JPG">
|
||||
<img src="images/500px/DSC08102.jpg">
|
||||
<img src="images/500px/2.JPG">
|
||||
|
||||
@ -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() },
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user