feat: use fancybox

2 files changed, 32 insertions, 0 deletions

diff --git a/themes/yinyang/layouts/partials/head.html b/themes/yinyang/layouts/partials/head.html
index 8a11ad2e..cbe76788 100644
--- a/themes/yinyang/layouts/partials/head.html
+++ b/themes/yinyang/layouts/partials/head.html
@@ -52,6 +52,13 @@
     <style>{{ .Content | safeCSS }}</style>
   {{ end }}
 
+  <!-- FancyBox -->
+  <script src="https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.umd.js"></script>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/@fancyapps/ui@5.0.36/dist/fancybox/fancybox.css"
+  />
+
   {{ range .Site.Params.extraCSSFiles -}}
   <link rel="stylesheet" href="{{ $.Site.Params.staticPrefix }}{{ . | relURL }}">
   {{- end }}
diff --git a/themes/yinyang/layouts/shortcodes/img.html b/themes/yinyang/layouts/shortcodes/img.html
new file mode 100644
index 00000000..9c64a5c1
--- /dev/null
+++ b/themes/yinyang/layouts/shortcodes/img.html
@@ -0,0 +1,25 @@
+<!-- image -->
+<figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
+{{ with .Get "link" }}<a href="{{ . }}">{{ end }}
+    <a href="{{ .Get "src" }}" data-fancybox {{ if isset .Params "title" }} data-caption="{{.Get "title" }}" {{ end }}>
+        <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
+    </a> 
+    {{ if .Get "link" }}</a>{{ end }}
+    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr") }}
+    <figcaption>{{ if isset .Params "title" }}
+        <h4>{{ .Get "title" }}</h4>{{ end }}
+        {{ if or (.Get "caption") (.Get "attr") }}<p>
+        {{ .Get "caption" }}
+        {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
+        {{ .Get "attr" }}
+        {{ if .Get "attrlink" }}</a> {{ end }}
+        </p> {{ end }}
+    </figcaption>
+{{ end }}
+</figure>
+<script>
+    Fancybox.bind("[data-fancybox]", {
+  // Your custom options
+});
+</script>
+<!-- image -->
\ No newline at end of file