Add zoomable images

6 files changed, 24 insertions, 3 deletions

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
new file mode 100644
index 0000000..3ebea6a
--- /dev/null
+++ b/layouts/_default/_markup/render-image.html
@@ -0,0 +1,3 @@
+<p>
+    <img class="img-zoomable" src="{{ .Destination | safeURL }}" alt="{{ .Text }}"{{ with .Title }} title="{{ . }}"{{ end }} />
+</p>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index a458be1..134f6e4 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -37,6 +37,7 @@
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.0/lazysizes.min.js" integrity="sha256-h2tMEmhemR2IN4wbbdNjj9LaDIjzwk2hralQwfJmBOE=" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
+<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js" integrity="sha256-Jd9xef1tT52aCb+cAqhElj/9D3c99lQvEjyKOuPn3S4=" crossorigin="anonymous"></script>
 {{ if or (.Site.Params.playerURL) (.Params.playerURL) }}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" integrity="sha256-uqQQGnDcmRKvhKwc5Vm4XT1GQ2oV6t1U0NR2N9tV+BQ=" crossorigin="anonymous" />
 <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js" integrity="sha256-6Y7CJDaltoeNgk+ZftgCD9jLgmGv4xKUo8nQ0HgAwVo=" crossorigin="anonymous"></script>
@@ -49,6 +50,8 @@
 <script src="{{ $lazysizes.Permalink }}"></script>
 {{ $fontawesome := resources.Get "css/fontawsome.min.css" }}
 <link rel="stylesheet" href="{{ $fontawesome.Permalink }}" />
+{{ $zoom := resources.Get "js/medium-zoom.min.js" }}
+<script src="{{ $zoom.Permalink }}"></script>
 {{ if or (.Site.Params.playerURL) (.Params.playerURL) }}
 {{ $aplayerCSS := resources.Get "css/APlayer.min.css" }}
 <link rel="stylesheet" href="{{ $aplayerCSS.Permalink }}" />
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 839a87a..1a8a28c 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,3 +1,12 @@
+<!-- init zoomable images -->
+<script>
+    $(function () {
+        mediumZoom('.img-zoomable', {
+            margin: 32
+        });
+    });
+</script>
+
 <!-- utterances comment loading indicator -->
 {{ if and (.IsPage) (.Site.Params.utterancesRepo) }}
 <script>
diff --git a/layouts/shortcodes/lazyimg-col.html b/layouts/shortcodes/lazyimg-col.html
index c973e67..ce68446 100644
--- a/layouts/shortcodes/lazyimg-col.html
+++ b/layouts/shortcodes/lazyimg-col.html
@@ -1 +1,3 @@
-<p><img class="lazyload" src="{{ .Site.Params.lazyPlaceholderCol }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /></p>
\ No newline at end of file
+<p>
+    <img class="lazyload img-zoomable" src="{{ .Site.Params.lazyPlaceholderCol }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" />
+</p>
\ No newline at end of file
diff --git a/layouts/shortcodes/lazyimg-row.html b/layouts/shortcodes/lazyimg-row.html
index 83c604e..61e61ec 100644
--- a/layouts/shortcodes/lazyimg-row.html
+++ b/layouts/shortcodes/lazyimg-row.html
@@ -1 +1,3 @@
-<p><img class="lazyload" src="{{ .Site.Params.lazyPlaceholderRow }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /></p>
\ No newline at end of file
+<p>
+    <img class="lazyload img-zoomable" src="{{ .Site.Params.lazyPlaceholderRow }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" />
+</p>
\ No newline at end of file
diff --git a/layouts/shortcodes/lazyimg.html b/layouts/shortcodes/lazyimg.html
index f9c6959..ff36b35 100644
--- a/layouts/shortcodes/lazyimg.html
+++ b/layouts/shortcodes/lazyimg.html
@@ -1 +1,3 @@
-<p><img class="lazyload" src="{{ .Site.Params.lazyPlaceholder }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" /></p>
\ No newline at end of file
+<p>
+    <img class="lazyload img-zoomable" src="{{ .Site.Params.lazyPlaceholder }}" data-src="{{ index .Params 1 }}" alt="{{ index .Params 0 }}" />
+</p>
\ No newline at end of file