This is a combined HTML/CSS/javascript question...
For my fex/dox(*) webserver I have written a webgallery extension.
Example:
https://fex.rus.uni-stuttgart.de/dox/framstag@rus.uni-stuttgart.de/public/gallery/Weihnachtsradeln_2024/
One can click on a preview image or use cursor right/left + ENTER.
Internally a simple javascript code moves the green selector by incrementing/decrementing the index number ii:
case 37: // cursor_left
document.getElementById("l"+ii).style = "background: Beige";
ii--;
if (ii == 0) ii = imax;
document.getElementById("l"+ii).style = "background: LightGreen";
break;
case 39: // cursor_right
document.getElementById("l"+ii).style = "background: Beige";
ii++;
if (ii > imax) ii = 1;
document.getElementById("l"+ii).style = "background: LightGreen";
break;
The problem now is: I want also cursor up/down to change the row.
But for this I must know how many preview images are in a row, to
calculate the index number.
I do not have a <table> with fixed number of columns, but I am using CSS:
ol {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
}
Next problem: my javascript knowledge is on a very beginner level :-}
(*)
https://fex.rus.uni-stuttgart.de/
--
Ullrich Horlacher Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart E-Mail:
horlacher@tik.uni-stuttgart.de Allmandring 30a Tel: ++49-711-68565868
70569 Stuttgart (Germany) WWW:
https://www.tik.uni-stuttgart.de/
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)