ImageZoom: add nearest neighbour (#1341)
This commit is contained in:
parent
5e71ed286e
commit
4fe2845234
3 changed files with 11 additions and 1 deletions
|
@ -156,7 +156,7 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
|
|||
|
||||
return (
|
||||
<div
|
||||
className="vc-imgzoom-lens"
|
||||
className={`vc-imgzoom-lens ${settings.store.nearestNeighbour ? "nearest-neighbor" : ""}`}
|
||||
style={{
|
||||
opacity,
|
||||
width: size.current + "px",
|
||||
|
|
|
@ -50,6 +50,12 @@ export const settings = definePluginSettings({
|
|||
default: true,
|
||||
},
|
||||
|
||||
nearestNeighbour: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Use Nearest Neighbour Interpolation when scaling images",
|
||||
default: false,
|
||||
},
|
||||
|
||||
zoom: {
|
||||
description: "Zoom of the lens",
|
||||
type: OptionType.SLIDER,
|
||||
|
|
|
@ -11,6 +11,10 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vc-imgzoom-lens.nearest-neighbor > img {
|
||||
image-rendering: pixelated; /* https://googlechrome.github.io/samples/image-rendering-pixelated/index.html */
|
||||
}
|
||||
|
||||
/* make the carousel take up less space so we can click the backdrop and exit out of it */
|
||||
[class|="carouselModal"] {
|
||||
height: fit-content;
|
||||
|
|
Loading…
Reference in a new issue