55 lines
1 KiB
Svelte
55 lines
1 KiB
Svelte
<script lang="ts">
|
|
import Zoom from 'svelte-medium-image-zoom'
|
|
import 'svelte-medium-image-zoom/dist/styles.css'
|
|
|
|
interface Props {
|
|
src: string
|
|
alt?: string
|
|
title?: string
|
|
id?: string
|
|
class?: string
|
|
}
|
|
|
|
let { src, alt = '', title, id, class: className = '' }: Props = $props()
|
|
</script>
|
|
|
|
<div class="photo-view {className}">
|
|
{#key id || src}
|
|
<Zoom>
|
|
<img {src} alt={title || alt || 'Photo'} class="photo-image" />
|
|
</Zoom>
|
|
{/key}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import '$styles/variables.scss';
|
|
@import '$styles/mixins.scss';
|
|
|
|
.photo-view {
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.photo-image {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
max-width: 700px;
|
|
object-fit: contain;
|
|
border-radius: $image-corner-radius;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
|
|
@include breakpoint('phone') {
|
|
border-radius: $image-corner-radius;
|
|
}
|
|
}
|
|
|
|
// Hide the zoom library's close button
|
|
:global([data-smiz-btn-unzoom]) {
|
|
display: none !important;
|
|
}
|
|
</style>
|