Improved mobile photo browsing

assets/scripts/photosScript.js

@@ -12,6 +12,7 @@ var grab_offsetY = 0;
 
 var idle_time = 0;
 var scaling = false;
+var isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;
 
 $(document).ready(
     function () {
@@ -52,11 +53,13 @@ $(document).ready(
                     showcase.css('top', $(window).height()/2 +'px');
                     showcase.css('cursor', 'default');
                 }
-
-
             }
             return false;
         });
+        document.getElementById("photos_title").scrollIntoView();
+        showcase.on('dragstart', function(event) { event.preventDefault(); }); // Stop image drag out of page
+        if (!isMobile)
+            setInterval(timerIncrement, 100);
     }
 );
 
@@ -90,17 +93,17 @@ showcase.mousedown(function(event){
     let cursorY = event.pageY - $(window).scrollTop();
     grab_offsetX = event.pageX - (showcase.position().left + showcase.width()/2);
     grab_offsetY = cursorY - (showcase.position().top + showcase.height()/2);
-    console.log("down");
+
+    if (isMobile)
+        toggleFullscreen();
 });
 
 showcase.mouseup(function(){
     move_photo = false;
-    console.log("up");
 });
 
 showcase.mouseleave(function(){
     move_photo = false;
-    console.log("up");
 });
 
 
@@ -136,6 +139,13 @@ function disableFullscreen() {
     showcaseButton.fadeIn(500);
 }
 
+function toggleFullscreen() {
+    if (is_fullscreen())
+        disableFullscreen();
+    else
+        enableFullscreen();
+}
+
 function hideTopBar() {
     headerTop.fadeOut(500);
     sideNav.fadeOut(500);
@@ -150,11 +160,6 @@ function is_fullscreen(){
     return showcaseButton.css("display") === "none";
 }
 
-$(document).ready(function () {
-    document.getElementById("photos_title").scrollIntoView();
-    showcase.on('dragstart', function(event) { event.preventDefault(); }); // Stop image drag out of page
-    setInterval(timerIncrement, 100);
-});
 
 function timerIncrement() {
     idle_time = idle_time+ 1;
@@ -187,16 +192,17 @@ $(document).keydown(function (e) {
 /*
  * Control images with swipes
  */
-var img = document.querySelector('#photo_overlay');
+
+var img = document.querySelector('#img-big');
 // Create a manager to manager the element
-var manager = new Hammer.Manager(img);
+var manager = new Hammer.Manager(img, {touchAction: "auto"}); // enable the touch action to allow scrolling on the sidenav
 // Create a recognizer
 var Swipe = new Hammer.Swipe();
 // Add the recognizer to the manager
 manager.add(Swipe);
 
 // Subscribe to the swipe event
-manager.on('swipe', function (e) {
+manager.on('swipe', function(e) {
     var direction = e.offsetDirection;
     if (direction === 4) { // right
         displayNext(-1);
@@ -237,19 +243,27 @@ function displayNext(direction) {
  */
 function changeImage(thumb) {
     displayLoading();
+    showcase.css('display', 'none');
     showcase.on('load', function () {
         hideLoading();
+        showcase.css('display', 'block');
+        if ($(showcase).width() > $(window).width()){ // prevent display problems on portait devices
+            var scale = $(window).width() * 0.9 / $(showcase).width();
+            $(showcase).width(scale*$(showcase).width());
+            $(showcase).height(scale*$(showcase).height());
+        }
     });
     var source = getSourceFromThumbnail(thumb);
     showcase.attr("src", source);
     showcase.css({
         width: 'auto',
-        height: '90%'
+        height: '90%',
     });
     showcase.css('left', $(window).width()/2 +'px');
     showcase.css('top', $(window).height()/2 +'px');
     showcaseLink.attr("href", source);
     showcaseDownload.attr("href", source);
+
 }
 
 
@@ -259,4 +273,4 @@ function displayLoading() {
 
 function hideLoading() {
     loading.fadeOut(200);
-}
+}

photos.php

@@ -2,7 +2,7 @@
 ob_start(); // Start reading html
 
 define("urlParam", "path");
-define("photoRoot", "photos");
+define("photoRoot", "photos_folders/photos");
 
 /**
  * Get active path from url and prevent from seeing folders before 'photos/'