added a progressbar

galleryscript.js

@@ -66,15 +66,16 @@ function showimage(i) {
     preload(i);
     subfoldersmalllist();
     currentimage=i;
+    setProgress(i);
     return;
 }
 
 function showbigimage(i) {
     // The medium version of image in the big image container
     if (i==-1) { return; }
-    ob=document.getElementById('imagecontainer');
+    var ob=document.getElementById('imagecontainer');
-    width=document.body.clientWidth-30;
+    var width=document.body.clientWidth-30;
-    height=document.body.clientHeight-225;
+    var height=document.body.clientHeight-225;
     if (fullscreen) { height=height+200; }
     if (originals) { mediumstr=encodeURIComponent(imagelist[i]);  }
     else { mediumstr='_med/med_'+encodeURIComponent(imagelist[i])+'.jpg'; }
@@ -82,8 +83,8 @@ function showbigimage(i) {
     document.getElementById('imagesingle').style.maxWidth=width;
     ob.style.height=height;
     document.getElementById('imagesingle').style.maxHeight=height;
-    dc=document.getElementById('desccontainer');
+    var dc=document.getElementById('desccontainer');
-    dc.innerHTML=currentlink(i)+imagedesc[i];
+    dc.innerHTML=getProgressEl()+currentlink(i)+imagedesc[i];
     dc.style.display='block';
     return;
 }
@@ -178,7 +179,22 @@ function thumblist(n,curr) {
     return;
 }
 
+function getProgressEl() {
+    // returns an empty progressbar
+    return '<hr id="progressbar"/>'
+}
+
+function setProgress(i) {
+    // Sets the progess bar width
+    var el = document.getElementById("progressbar");
+    if (el != null) {
+        el.style.width=parseInt(100*(i+1)/imagelist.length)+'%';
+    }
+    return
+}
+
 function getThumbStartEnd(n,maxThumb) {
+    // Sets the thumbnail list first and last shown item to sensible values
     startI=Math.max(0,n+1-Math.round((maxThumb/2)));
     startI=Math.min(startI,imagelist.length-maxThumb);
     startI=Math.max(0,startI);

gallerystyle.css

@@ -223,3 +223,13 @@ img {
 .arrowtext {
     font-size: small;
 }
+#progressbar {
+    text-align:left;
+    color:black;
+    background-color:black;
+    border-width:0;
+    height:1px;
+    margin-left:0;
+    margin-bottom: -2px;
+    margin-top: 2px;
+}