From a36abb412afc48bd6c720ad6a6a116a7aec59afa Mon Sep 17 00:00:00 2001
From: Spedon <RealSped0n@outlook.com>
Date: Sat, 11 Mar 2023 14:37:15 +0800
Subject: [PATCH] add overlay section add use json to store images data

---
 layouts/index.html | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index a63d3f3..52e88ff 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -10,21 +10,27 @@
 <header>
   {{- partial "header.html" . -}}
 </header>
+<div class="overlay">
+  <section class="prev_section"></section>
+  <section class="close_section"></section>
+  <section class="next_section"></section>
+  <div class="overlay_cursor"></div>
+</div>
 <div id="main">
   {{ $sourcePath := "images" }}
   {{ $gallery := site.GetPage $sourcePath }}
-  {{ $images := $gallery.Resources.ByType "image" }}
-  {{ $index := len $images }}
-  <script type="text/javascript">
-    document.body.setAttribute('featuredPicNum', {{ $index }})
-  </script>
-  {{ range $images }}
-    {{ $index = sub $index 1}}
-    <div class="image inactive" data-index="{{ $index }}">
-      <img src="{{ .RelPermalink }}" height="{{ .Height }}" width="{{ .Width }}"/>
-    </div>
+  {{ with $gallery.Resources.ByType "image" }}
+    {{ $index := len . }}
+    {{ $.Scratch.Add "img" slice }}
+    {{ range . }}
+      {{ $index = sub $index 1}}
+      {{ $.Scratch.Add "img" (dict "link" .RelPermalink "height" .Height "width" .Width) }}
+      <div class="image_container" data-index="{{ $index }}" data-status="inactive">
+        <img src="{{ .RelPermalink }}" height="{{ .Height }}" width="{{ .Width }}"/>
+      </div>
+    {{ end }}
+    <script id="images_array" type="application/json">{{ $.Scratch.Get "img" | jsonify | safeJS }}</script>
   {{ end }}
-
 </div>
 <footer>
   {{ partial "footer.html" . }}