made gallery navigation easier

public/functions.js

@@ -177,6 +177,22 @@ function allown_sfw(){
 	addlc('a18','yes');
 	window.location.reload();
 }
+function preloadImage(im_url) {
+  // Create a div element to contain the image tag
+  let container = document.createElement('div');
+
+  // Set the innerHTML of the container with the image tag
+  container.innerHTML = `<img src="${im_url}" />`;
+
+  // Append the container to the document body to trigger loading
+  document.body.appendChild(container);
+
+  // Remove the container after a short delay (you can adjust the delay as needed)
+  setTimeout(function() {
+    document.body.removeChild(container);
+  }, 1);
+}
+
 function urlpreview(urli,postjson) {
 returnpost = '';	
 	if (urli.match(/.(jpg|jpeg|png|gif)$/i))
@@ -208,7 +224,9 @@ let fakect = ' actv';
       	if(fakect == ' actv') {
       	g_mimg  = '<img src="'+singleptlink+'" alt="main image" id="mi_'+postjson['id']+'"/>';
       	}
-      	g_timgs += '<img class="gtumb'+fakect+'" src="'+singletmlink+'" data-msrc="'+singleptlink+'" alt="thumbnail" data-id="'+postjson['id']+'">'
+      	g_timgs += '<img class="gtumb'+fakect+'" src="'+singletmlink+'" data-msrc="'+singleptlink+'" alt="thumbnail" data-id="'+postjson['id']+'">';
+      	 preloadImage(singleptlink);
+
 		//returnpost +='<img src="'+singleptlink+'" />';
 		}
 		fakect = '';
@@ -302,6 +320,8 @@ let fakect = ' actv';
 	}
 	return returnpost;
 }
+
+
 function pollbuilder(postjson) {
 	returnpoll = '<div class="poll">';
 	for(popt in postjson['poll_data']['options']){
@@ -393,7 +413,7 @@ document.getElementById("mi_"+curod).src= this.getAttribute('data-msrc');
   document.querySelectorAll('[data-id="'+curod+'"]').forEach(el => el.classList.remove('actv'));
 
   this.classList.add('actv');
-
+document.getElementById("mi_"+curod).scrollIntoView(); 
   });
   });
 

public/styles.css

@@ -122,14 +122,15 @@ a.viewmore{clear:both;display:block;text-align:right;color:#333;color:var(--ligh
 }
 .gallery_thumbs {
     white-space: pre;
-    overflow-x: scroll;
+   overflow-x: auto;
     height: 100px;
     overflow-y: hidden;
 }
 .gtumb {
     vertical-align: top;
 }
-.gtumb {width:100px;margin:0px 5px;}
+.gtumb {width:100px;margin:0px 5px;    object-fit: cover;
+    height: 100px;}
 .gtumb.actv{    border-top: 3px solid var(--linkc);}
 .postc.link a {
     background: #eee;
@@ -483,6 +484,10 @@ span.menubars:after {
 }
 .comment_text p{
 word-wrap: break-word;
+line-height: 124%;
+}
+a:hover,a:active {
+    opacity: 0.8;
 }
 .comment_text img {
     max-width: 99%;

run.php

@@ -19,7 +19,7 @@
             <span id="plus" onclick="toggle(\'leftbar\')"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#fff" role="img" aria-label="Menu"><path d="M140.001-254.616v-59.999h679.998v59.999H140.001Zm0-195.385v-59.998h679.998v59.998H140.001Zm0-195.384v-59.999h679.998v59.999H140.001Z"></path></svg></span>
             <span id="taptoopenmenu" onclick="toggle(\'subssearch\')"><span id="pagetitletext">Loading...</span>
             <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" id="icon-target" style=""><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span>
-            <span id="menu" onclick="toggle(\'rightbar\')"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#fff" role="img" aria-label="Sort and other options"><path d="M480-150q-32.5 0-55.25-22.75T402-228q0-32.5 22.75-55.25T480-306q32.5 0 55.25 22.75T558-228q0 32.5-22.75 55.25T480-150Zm0-252q-32.5 0-55.25-22.75T402-480q0-32.5 22.75-55.25T480-558q32.5 0 55.25 22.75T558-480q0 32.5-22.75 55.25T480-402Zm0-252q-32.5 0-55.25-22.75T402-732q0-32.5 22.75-55.25T480-810q32.5 0 55.25 22.75T558-732q0 32.5-22.75 55.25T480-654Z"></path></svg></span>
+            <span id="menu" onclick="toggle(\'rightbar\')"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#fff" role="img" aria-label="Sort and other options"><path d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z"></path></svg></span>
         </div>
     
     <div id="menus">