add image navigation button

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);
+}

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)

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;

files/templates/modals/expanded_image.html

@@ -4,6 +4,7 @@
 			<a rel="noopener" target="_blank" id="expanded-image-wrap-link">
 				<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
 			</a>
+			<a id="image-navigation" class="fas fa-arrow-right px-5 py-4 px-md-4 py-md-5 d-none"></a>
 		</div>
 	</div>
 </div>