olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor tweaks

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-07-21 03:16:20 +03:00
parent 209202945a
commit 93b8f63057
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/grid-n-view.css
View File

@ -22,6 +22,7 @@
--lightbox-text-color: black; --lightbox-text-color: black;
--lightbox-background-color: white; --lightbox-background-color: white;
/*--lightbox-background-color: rgba(0,0,0,0.8);*/
} }
.gallery-dark { .gallery-dark {
@ -80,9 +81,8 @@ body {
width: auto; width: auto;
image-rendering: crisp-edges; image-rendering: crisp-edges;
box-sizing: border-box; box-sizing: border-box;
}
.gallery .images img { cursor: pointer;
cursor: hand;
} }
.gallery .images img.current { .gallery .images img.current {
border: solid 2px red; border: solid 2px red;
@ -134,7 +134,7 @@ body {
left: 0.5em; left: 0.5em;
} }
.gallery .lightbox.clickable { .gallery .lightbox.clickable {
cursor: hand; cursor: pointer;
} }
/* XXX add metadata display... */ /* XXX add metadata display... */
.gallery .lightbox img { .gallery .lightbox img {
@ -150,14 +150,14 @@ body {
* var(--lightbox-image-margin-top)); * var(--lightbox-image-margin-top));
} }
/* controls: next/prev... */ /* controls: next/prev... */
.lightbox .button { .gallery .lightbox .button {
cursor: hand; cursor: pointer;
font-size: var(--lightbox-button-size); font-size: var(--lightbox-button-size);
padding: 0 0.25em; padding: 0 0.25em;
filter: saturate(0); filter: saturate(0);
opacity: 0.1; opacity: 0.1;
} }
.lightbox .button:hover { .gallery .lightbox .button:hover {
opacity: 1; opacity: 1;
filter: saturate(1); filter: saturate(1);
} }

20
grid-n-view.js
View File

@ -135,6 +135,18 @@ var keyboard = {
//--------------------------------------------------------------------- //---------------------------------------------------------------------
var Gallery = { var Gallery = {
code: `
<div class="gallery">
<!-- gallery: content -->
<div class="images">
</div>
<!-- lightbox -->
<div class="lightbox">
<img>
<div class="button close"></div>
</div>
</div>`,
dom: undefined, dom: undefined,
__lightbox: undefined, __lightbox: undefined,
@ -378,12 +390,10 @@ var Gallery = {
var that = this var that = this
this.dom = dom this.dom = dom
this.dom this.dom.querySelector('.images')
.addEventListener('click', function(evt){ .addEventListener('click', function(evt){
var target = evt.target var target = evt.target
if(target.tagName == 'IMG' if(target.tagName == 'IMG'){
// skip images in lightbox...
&& target.parentElement === that.dom){
that.current = target that.current = target
that.show() } }) that.show() } })
@ -494,7 +504,7 @@ var Lightbox = {
&& that.prev() && that.prev()
evt.clientX > that.dom.offsetWidth / 2 + deadzone/2 evt.clientX > that.dom.offsetWidth / 2 + deadzone/2
&& that.next() }) && that.next() })
// mouseofver... // mousemove...
var hysteresis = this.caption_hysteresis ?? 10 var hysteresis = this.caption_hysteresis ?? 10
this.dom this.dom
.addEventListener('mousemove', function(evt){ .addEventListener('mousemove', function(evt){