added slideshow: double click or swipe up to start and stop

html/index.php

@@ -238,6 +238,23 @@ function singleimage() {
    var pos = <?php echo $pos; ?>;
    var subpath = '<?php echo $subpath ?>';
    var images = <?php echo json_encode($objects['files']) ?>;
+   var slide = false;
+   var timer = null;
+   function slideshow() {
+     slide = !slide;
+     if (timer) clearInterval(timer);
+     if (slide) {
+       $('#pos').text('slideshow started');
+       $('#pos').fadeIn(1000, function() {$('#pos').fadeOut(1000)});
+       timer = setInterval(function() {
+         next();
+       }, 5000);
+     } else {
+       timer = nil;
+       $('#pos').text('slideshow started');
+       $('#pos').fadeIn(1000, function() {$('#pos').fadeOut(1000)});
+     }
+   }
    function next() {
      if (++pos>=images.length) {
        pos=0;
@@ -280,6 +297,14 @@ function singleimage() {
        console.log('back')
        back()
      })
+     $('div.image').on('swipeup', function(e) {
+       console.log('slideshow')
+       slideshow()
+     })
+     $('div.image').dblclick(function(e) {
+       console.log('slideshow')
+       slideshow()
+     })
    })
   </script>
   <?php

html/style.css

@@ -124,7 +124,7 @@ div.images img.thumbnail {
   align-self: center;
 }
 
-@media handheld, (max-width: 60em), (max-height: 60em) {
+@media handheld, (max-width: 40em), (max-height: 40em) {
   div#header.single, .more {
     display: none;
   }