viewer js integration for gallery

exampleSite/content/gallery.md

@@ -11,4 +11,9 @@ galleryImages:
  - src: https://thumbs.dreamstime.com/b/summer-day-smiling-women-relax-wearing-red-dress-fashion-standing-wooden-bridge-over-sea-blue-sky-background-summer-107411998.jpg
  - src: https://thumbs.dreamstime.com/b/young-woman-playing-dog-pet-beach-sunrise-sunset-girl-dog-having-fun-seasid-seaside-cute-neglected-stay-66480218.jpg
  - src: https://thumbs.dreamstime.com/b/funny-picture-taken-sunrise-frozen-lake-perspective-rider-retro-bicycle-sunrise-personal-211066044.jpg 
+viewer : true
+viewerOptions : {
+    title: false
+    # you can add more options here. refer https://github.com/fengyuanchen/viewerjs?tab=readme-ov-file#options
+}
 ---

layouts/_default/gallery.html

@@ -1,6 +1,12 @@
 {{ define "head" }}
 <meta name="description" content="{{ .Title }} of {{ .Site.Title }}">
 <!-- <link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/list.css" media="all"> -->
+{{ if .Params.viewer | default true }}
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/css/gallery.css">
+<link rel="stylesheet" href="{{ .Site.Params.staticPath }}/viewer/viewer.min.css">
+<script src="{{ .Site.Params.staticPath }}/viewer/viewer.min.js"></script>
+{{ end }}
+
 {{ end }}
 
 {{ define "title" }}
@@ -19,11 +25,22 @@ <h6 class="text-center">{{ .Params.description | emojify }}</h6>
             {{ range .Params.galleryImages }}
             <div class="col-md-4 p-0 m-0">
                 <div class="card p-0 m-0 border-0">
-                    <img class="w-100" height="280px" src="{{ .src }}">
+                    <img class="w-100 {{if .Params.viewer | default true}}viewer-enabled-image{{end}}" height="280px" src="{{ .src }}">
                 </div>
             </div>
             {{ end }}
         </div>
     </div>
 </div>
+
+{{ if .Params.viewer | default true }}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        var viewer = new Viewer(document.getElementById('list-page'), {
+            ...{{ .Params.viewerOptions }}
+        });
+    });
+</script>
 {{ end }}
+
+{{ end }}

static/css/gallery.css

@@ -0,0 +1,3 @@
+.viewer-enabled-image {
+    cursor: zoom-in;
+}