diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
index ef65610..f487212 100644
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@@ -1,6 +1,6 @@
-
+
\ No newline at end of file
diff --git a/assets/css/photos.css b/assets/css/photos.css
index d87554a..c089bf9 100644
--- a/assets/css/photos.css
+++ b/assets/css/photos.css
@@ -168,6 +168,10 @@
position: fixed;
display: block;
z-index: 10;
+ /* Block selection of buttons (useful for mobile devices) */
+ -webkit-user-select: none; /* Chrome all / Safari all */
+ -moz-user-select: none; /* Firefox all */
+ -ms-user-select: none; /* IE 10+ */
}
#close_back {
diff --git a/assets/css/sidenav.css b/assets/css/sidenav.css
index 8de923c..6000b19 100644
--- a/assets/css/sidenav.css
+++ b/assets/css/sidenav.css
@@ -2,8 +2,8 @@
.sidenav {
height: 100%;
- width: 250px;
- margin-left: -500px; /* change margin with JavaScript */
+ width: 300px;
+ margin-left: -270px; /* change margin with JavaScript */
position: fixed; /* Stay in place */
z-index: 1000;
top: 0;
@@ -18,7 +18,8 @@
/* The navigation menu links */
.sidenav a {
- padding: 8px 8px 8px 32px;
+ padding: 8px 0 8px 32px;
+ margin-right: 30px;
text-decoration: none;
font-size: 20px;
font-family: 'Rubik', sans-serif;
diff --git a/assets/css/style.css b/assets/css/style.css
index 911e461..d01b7bc 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -326,6 +326,14 @@ Full-Width Styles
color: black;
}
+#swipe_area {
+ height: 100%;
+ width: 30px;
+ background: #3a7eaa;
+ position: fixed;
+ top: 0;
+ left: 0;
+}
/*******************************************************************************
Small Device Styles
diff --git a/assets/scripts/photosScript.js b/assets/scripts/photosScript.js
index 86d5816..510bf54 100644
--- a/assets/scripts/photosScript.js
+++ b/assets/scripts/photosScript.js
@@ -64,6 +64,29 @@ $(document).keydown(function(e) {
e.preventDefault(); // prevent the default action (scroll / move caret)
});
+/*
+ * Control images with swipes
+ */
+var img = document.querySelector('#photo_overlay');
+// Create a manager to manager the element
+var manager = new Hammer.Manager(img);
+// 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) {
+ var direction = e.offsetDirection;
+ if (direction === 4) { // right
+ displayNext(-1);
+ } else if (direction === 2){ // left
+ displayNext(1);
+ }
+});
+
+
+
/*
diff --git a/assets/scripts/sidenavScript.js b/assets/scripts/sidenavScript.js
index 9ff7ccc..215a8bf 100644
--- a/assets/scripts/sidenavScript.js
+++ b/assets/scripts/sidenavScript.js
@@ -21,7 +21,7 @@ function openNav() {
* and hide the back button overlay
*/
function closeNav() {
- sidenav.css("margin-left", "-250px");
+ sidenav.css("margin-left", "-270px");
backButton.removeClass("active_background");
disableHamburger();
menuOpen = false;
@@ -46,3 +46,24 @@ function disableHamburger() {
function enableHamburger() {
hamburger.addClass("change");
}
+
+/*
+ * Open navigation menu when swiping right (if not swiping on an image)
+ */
+var img = document.querySelector('.sidenav');
+// Create a manager to manager the element
+var manager = new Hammer.Manager(img);
+// 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) {
+ var direction = e.offsetDirection;
+ if (direction === 4) { // right
+ openNav();
+ } else if (direction === 2) { // left
+ closeNav();
+ }
+});
diff --git a/index.php b/index.php
index c5b7015..974b283 100644
--- a/index.php
+++ b/index.php
@@ -10,6 +10,7 @@
+
diff --git a/template.php b/template.php
index 7ed7f7d..a72e27f 100644
--- a/template.php
+++ b/template.php
@@ -10,9 +10,10 @@
-
-
+
+
+
@@ -46,5 +47,6 @@ include("includes/sidenav.html");
+