feat(image-zoom): add minimal image zoom functionality

- Introduced CSS for image zoom overlay and image styling.
- Implemented JavaScript for handling image zoom interactions, including overlay creation and close functionality.
- Updated configuration to enable image zoom feature in site parameters.
- Added partial for including image zoom assets in the layout.
This commit is contained in:
Xin
2025-09-10 23:59:51 +01:00
parent 3bc454bbf6
commit 09728a4aa9
5 changed files with 141 additions and 0 deletions

View File

@@ -13,3 +13,10 @@
{{- if (.Store.Get "hasAsciinema") -}}
{{- partial "scripts/asciinema.html" . -}}
{{- end -}}
{{/* Image zoom */}}
{{- with site.Params.imageZoom }}
{{- if .enable }}
{{- partial "scripts/image-zoom.html" $ -}}
{{- end -}}
{{- end -}}

View File

@@ -0,0 +1,13 @@
{{/* Optional minimal image zoom assets */}}
{{- $js := resources.Get "js/image-zoom.js" -}}
{{- $css := resources.Get "css/components/image-zoom.css" -}}
{{- if hugo.IsProduction -}}
{{- $js = $js | minify | fingerprint -}}
{{- $css = $css | minify | fingerprint -}}
{{- end -}}
<link rel="preload" href="{{ $css.RelPermalink }}" as="style" integrity="{{ $css.Data.Integrity }}" />
<link href="{{ $css.RelPermalink }}" rel="stylesheet" integrity="{{ $css.Data.Integrity }}" />
<script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>