stefan
/
simple-picture-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

turn off vignette with the newest version of lightbox 

see https://github.com/igordanchenko/yet-another-react-lightbox/issues/14
This commit is contained in:
Stefan Forstenlechner 2022-08-08 20:07:12 +02:00
parent dee47d5e6b
commit 7e7b24d084
4 changed files with 1165 additions and 471 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1616
picture-gallery-client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
picture-gallery-client/package.json
View File

@ -29,7 +29,7 @@
"react-inject-env": "2.1.0",
"typescript": "4.6.3",
"web-vitals": "2.1.4",
"yet-another-react-lightbox": "1.13.4"
"yet-another-react-lightbox": "1.14.0"
},
"scripts": {
"format": "prettier --write \"**/*.+(ts|tsx)\"",

6
picture-gallery-client/src/ImageGallery/ImageGallery.tsx
View File

@ -9,7 +9,6 @@ import { Fullscreen } from "yet-another-react-lightbox/plugins/fullscreen";
import { Slideshow } from "yet-another-react-lightbox/plugins/slideshow";
import { Thumbnails } from "yet-another-react-lightbox/plugins/thumbnails";
import "yet-another-react-lightbox/plugins/thumbnails.css";
import "./yarl.thumbnails.override.css";
import { Zoom } from "yet-another-react-lightbox/plugins/zoom";
function ImageGallery({ images }: { images: ImageWithThumbnail[] }) {
@ -41,8 +40,11 @@ function ImageGallery({ images }: { images: ImageWithThumbnail[] }) {
close={() => setIndex(-1)}
controller={{ closeOnBackdropClick: true }}
plugins={[Fullscreen, Slideshow, Thumbnails, Zoom]}
thumbnails={{ vignette: false }}
styles={{
root: { "--yarl__color_backdrop": "rgba(0, 0, 0, 0.85)" } as any,
root: {
"--yarl__color_backdrop": "rgba(0, 0, 0, 0.85)",
},
}}
/>
</>

12
picture-gallery-client/src/ImageGallery/yarl.thumbnails.override.css
View File

@ -1,12 +0,0 @@
.yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::before {
background: initial;
}
.yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::after {
background: initial;
}
.yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::before {
background: initial;
}
.yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::after {
background: initial;
}