diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 40a1e5a89..73593600c 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -7688,3 +7688,18 @@ thead {
#formatting-table tbody td:nth-child(3) {
min-width: 300px
}
+
+#image-navigation {
+ border: 4px solid transparent;
+ color: black;
+ font-size: 35px;
+ background-color: white !important;
+ opacity: 0.4;
+ margin-left: -5px;
+ cursor: pointer;
+ text-decoration: none;
+}
+
+#image-navigation:hover {
+ border: 4px solid var(--primary);
+}
diff --git a/files/assets/js/bottom.js b/files/assets/js/bottom.js
index c7b4a3dc4..ef9943832 100644
--- a/files/assets/js/bottom.js
+++ b/files/assets/js/bottom.js
@@ -170,6 +170,10 @@ bs_trigger(document);
const negative_awards = document.querySelectorAll("[data-positive=False]")
+let all_images
+let position
+let num_of_images
+
document.addEventListener("click", function (e) {
let element = e.target
if (element.tagName == "I")
@@ -177,8 +181,25 @@ document.addEventListener("click", function (e) {
if (!element) return
- if (element instanceof HTMLImageElement && (element.alt.startsWith('![](') || element.classList.contains('img'))) {
- expandImage()
+ if (element.id == 'image-navigation') {
+ expandImage(element.href)
+ position += 1
+ if (position < num_of_images) {
+ element.classList.remove('d-none')
+ element.href = all_images[position].src
+ }
+ }
+ else if (element instanceof HTMLImageElement && (element.alt.startsWith('![](') || element.classList.contains('img'))) {
+ all_images = element.parentElement.parentElement.parentElement.getElementsByClassName('img')
+ if (all_images.length > 1) {
+ expandImage()
+ num_of_images = all_images.length
+ const imagenav_btn = document.getElementById('image-navigation')
+ imagenav_btn.classList.remove('d-none')
+ position = [].indexOf.call(all_images, element);
+ position += 1
+ imagenav_btn.href = all_images[position].src
+ }
}
else if (element.classList.contains('showmore')) {
showmore(element)
diff --git a/files/assets/js/core.js b/files/assets/js/core.js
index a433875fa..e8e9a68f6 100644
--- a/files/assets/js/core.js
+++ b/files/assets/js/core.js
@@ -189,6 +189,8 @@ function formkey() {
const expandImageModal = document.getElementById('expandImageModal')
function expandImage(url) {
+ document.getElementById('image-navigation').classList.add('d-none')
+
const e = this.event
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
return;
diff --git a/files/templates/modals/expanded_image.html b/files/templates/modals/expanded_image.html
index 5393f2f72..cfe9a98e0 100644
--- a/files/templates/modals/expanded_image.html
+++ b/files/templates/modals/expanded_image.html
@@ -4,6 +4,7 @@
+