Lib: Add optional image zoom on mouse hover
This commit is contained in:
@ -21,6 +21,9 @@
|
|||||||
|
|
||||||
/** Additional classes to insert */
|
/** Additional classes to insert */
|
||||||
imgclass?: string;
|
imgclass?: string;
|
||||||
|
|
||||||
|
/** Slightly zoom the image on mouse-hover */
|
||||||
|
hoverzoom?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
@ -30,6 +33,7 @@
|
|||||||
imgstyle = undefined,
|
imgstyle = undefined,
|
||||||
containerstyle = undefined,
|
containerstyle = undefined,
|
||||||
imgclass = "",
|
imgclass = "",
|
||||||
|
hoverzoom = false,
|
||||||
...restProps
|
...restProps
|
||||||
}: LazyImageProps = $props();
|
}: LazyImageProps = $props();
|
||||||
|
|
||||||
@ -51,16 +55,16 @@
|
|||||||
<div
|
<div
|
||||||
use:lazyload
|
use:lazyload
|
||||||
onLazyVisible={lazy_visible_handler}
|
onLazyVisible={lazy_visible_handler}
|
||||||
|
class="overflow-hidden"
|
||||||
style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ??
|
style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ??
|
||||||
''}; max-width: {imgwidth}px; max-height: {imgheight}px"
|
''}; max-width: {imgwidth}px; max-height: {imgheight}px"
|
||||||
>
|
>
|
||||||
<!-- TODO: If an image disappears and reappears, it will be loaded again... -->
|
|
||||||
{#if load}
|
{#if load}
|
||||||
{#await fetch_image_base64(src) then data}
|
{#await fetch_image_base64(src) then data}
|
||||||
<img
|
<img
|
||||||
src={data}
|
src={data}
|
||||||
use:img_opacity_handler
|
use:img_opacity_handler
|
||||||
class="bg-surface-100 transition-opacity {imgclass}"
|
class="bg-surface-100 transition-all {imgclass} {hoverzoom ? 'hover:scale-105' : ''}"
|
||||||
style="opacity: 0; transition-duration: 300ms; {imgstyle ?? ''}"
|
style="opacity: 0; transition-duration: 300ms; {imgstyle ?? ''}"
|
||||||
draggable="false"
|
draggable="false"
|
||||||
{...restProps}
|
{...restProps}
|
||||||
|
|||||||
Reference in New Issue
Block a user