adding spots for navigation for touch screens

galleryscript.js

@@ -987,12 +987,12 @@ function showbigimage(i) {
         linkToBig = '<a class="linktobig" onclick="slidenextrestart()">';
     }
     if (isHTML(imagelist[i])) {
-        $('#imagecontainer').html('<div id="imagebig">'+linkToBig+
+        $('#imagecontainer').html('<span id="prevTouch"/><span id="nextTouch"/><div id="imagebig">'+linkToBig+
             '<iframe id="imagesingle" src="'+encodeURIComponent(imagelist[i])+'"></a></div>');
         $('#imagesingle').css('width',width);
         $('#imagesingle').css('height',height);
     } else { // is image 
-        $('#imagecontainer').html('<div id="imagebig">'+linkToBig+
+        $('#imagecontainer').html('<span id="prevTouch"/><span id="nextTouch"/><div id="imagebig">'+linkToBig+
             '<img id="imagesingle" src="'+mediumstr+'" title="'+titlestring(imagedesc[i])+'"></a></div>');
         $('#imagesingle').css('max-width',width);
         $('#imagesingle').css('max-height',height);
@@ -1003,6 +1003,16 @@ function showbigimage(i) {
         $('#imagesingle').css('background-image','url("_tn/tn_'+encodeURIComponent(imagelist[i])+'.jpg")');
     }
     $('#imagecontainer').css('height',height);
+    $('#prevTouch').click(function() {
+        currentimage-=1;
+        if (currentimage<0) { currentimage=imagelist.length-1; }
+        showimage(currentimage);
+    });
+    $('#nextTouch').click(function() {
+        currentimage+=1;
+        if (currentimage>(imagelist.length-1)) { currentimage=0; }
+        showimage(currentimage);
+    });
     
     $('#desccontainer').html(getProgressEl()+currentlink(i)+imagedesc[i]);
     $('#desccontainer').css('display','block');

gallerystyle.css

@@ -226,6 +226,19 @@ iframe {
     line-height: 40px;
     font-family: sans-serif;
 }
+#prevTouch,#nextTouch {
+    width: 10%;
+    height: inherit;
+    position: absolute;
+    display: block;
+    z-index: 1;
+    cursor: pointer;
+}
+#prevTouch:hover,#nextTouch:hover {
+    background-color: rgba(238,238,238,0.5);
+}
+#prevTouch { left:0px; }
+#nextTouch { right:0px; }
 .thumbmenu {
     font-size: small;
     margin: 4px 4px 4px 15px;