From a8c9de315d6680f17217dc0abbc135d23092f344 Mon Sep 17 00:00:00 2001
From: Jeffrey Tse <jeffreytse.mail@gmail.com>
Date: Thu, 29 Jun 2023 15:01:30 +0800
Subject: feat: photo previewer config options support
---
_config.yml | 6 ++++
_includes/extensions/photo-swipe.html | 67 ++++++++++++++++++++++++++++-------
2 files changed, 61 insertions(+), 12 deletions(-)
diff --git a/_config.yml b/_config.yml
index 59b1c2b..981fa59 100644
--- a/_config.yml
+++ b/_config.yml
@@ -183,6 +183,12 @@ yat:
# Pagination setting
# paginate: 5
+# Photo previewer settings
+# photo_previewer:
+# photo_selectors: "section.main" # Preview specified areas of photos by CSS selectors (It also can be an array)
+# photo_scale: 2 # Adjust the preview scale of photos
+# background_opacity: 0.85 # Background backdrop opacity
+
# Disqus comments
# disqus:
# shortname: "Your Disqus username"
diff --git a/_includes/extensions/photo-swipe.html b/_includes/extensions/photo-swipe.html
index c88592a..ec4b8a2 100644
--- a/_includes/extensions/photo-swipe.html
+++ b/_includes/extensions/photo-swipe.html
@@ -16,26 +16,69 @@
<script>
function initPhotoSwipe() {
- var mainEl = document.querySelector("section.main");
+ const selectors = '{{ site.photo_previewer.photo_selectors || join: "," }}'
+ .split(",")
+ .filter((item) => item.length > 0);
+
+ // Default selector
+ if (selectors.length === 0) {
+ selectors.push("section.main");
+ }
+
+ const areaEls = [];
+ selectors.forEach((selector) => {
+ const el = document.querySelector(selector);
+ if (el) {
+ areaEls.push(el);
+ }
+ });
+
+ const imgEls = [];
+
+ areaEls.forEach((areaEl) => {
+ var els = areaEl.querySelectorAll("img:not(.emoji)");
+ els.forEach((el) => {
+ if (!imgEls.includes(el)) {
+ imgEls.push(el);
+ }
+ });
+ });
+
+ if (imgEls.length === 0) {
+ return;
+ }
+
+ const photo_scale = '{{ site.photo_previewer.photo_scale }}';
+ const background_opacity = '{{ site.photo_previewer.background_opacity }}';
+ const previewer_options = {
+ photo_scale: photo_scale.length > 0 ? parseFloat(photo_scale) : 2,
+ background_opacity: background_opacity.length > 0 ?
+ parseFloat(background_opacity) : 0.85,
+ };
- var imgEls = mainEl.querySelectorAll("img:not(.emoji)");
imgEls.forEach((imgEl) => {
imgEl.outerHTML = `
- <a class="photo-swipe"
- href="${imgEl.src}"
- data-width="${Math.max(imgEl.naturalWidth, imgEl.width) * 2}"
- data-height="${Math.max(imgEl.naturalHeight, imgEl.height) * 2}"
- data-caption="${imgEl.getAttribute("caption") || imgEl.alt}"
- target="_blank">
- ${imgEl.outerHTML}
- </a>`;
+ <a class="photo-swipe"
+ href="${imgEl.src}"
+ data-width="${
+ Math.max(imgEl.naturalWidth, imgEl.width) *
+ previewer_options.photo_scale
+ }"
+ data-height="${
+ Math.max(imgEl.naturalHeight, imgEl.height) *
+ previewer_options.photo_scale
+ }"
+ data-caption="${imgEl.getAttribute("caption") || imgEl.alt}"
+ target="_blank">
+ ${imgEl.outerHTML}
+ </a>`;
});
// Init empty gallery array
var container = [];
// Loop over gallery items and push it to the array
- var linkEls = mainEl.querySelectorAll("a.photo-swipe");
+ var linkEls = document.querySelectorAll("a.photo-swipe");
linkEls.forEach((link) => {
var item = {
src: link.getAttribute("href"),
@@ -60,7 +103,7 @@
// Define object and gallery options
var options = {
index: index,
- bgOpacity: 0.85,
+ bgOpacity: previewer_options.background_opacity,
showHideOpacity: true,
closeOnScroll: true,
getDoubleTapZoom: (isMouseClick, item) => {
--
cgit v1.2.3