helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

feat(web): add zoom to photo viewer (#2577)

Browse source 
* feat(web): add zoom to photo viewer

* reduce asset viewer next/prev button div width

* add wrap to block statement
This commit is contained in:
Manuel Taberna 2023-05-29 16:12:58 +02:00 • committed by GitHub
parent 94d0705607
commit e7122d7a72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

25
web/src/lib/components/asset-viewer/photo-viewer.svelte
View file

@ -7,9 +7,11 @@
notificationController,
NotificationType
} from '../shared-components/notification/notification';
import { useZoomImageWheel } from '@zoom-image/svelte';
export let asset: AssetResponseDto;
export let publicSharedKey = '';
let imgElement: HTMLDivElement;
let assetData: string;
@ -70,6 +72,13 @@
});
}
};
const { createZoomImage: createZoomImageWheel } = useZoomImageWheel();
$: if (imgElement) {
createZoomImageWheel(imgElement, {
wheelZoomRatio: 0.06
});
}
</script>
<svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} />
@ -81,12 +90,14 @@
{#await loadAssetData()}
<LoadingSpinner />
{:then assetData}
<img
transition:fade={{ duration: 150 }}
src={assetData}
alt={asset.id}
class="object-contain h-full transition-all"
draggable="false"
/>
<div bind:this={imgElement} class="h-full w-full">
<img
transition:fade={{ duration: 150 }}
src={assetData}
alt={asset.id}
class="object-contain h-full w-full"
draggable="false"
/>
</div>
{/await}
</div>