arrow keys now switches viewed image

templates/viewer.html

@@ -63,7 +63,7 @@
     }
 </script>
 
-<div class="container-fluid">
+<div id="viewer" class="container-fluid">
     {% set max=eids.split(',')|length %}
     <br>
             <center>
@@ -86,7 +86,8 @@
                         var faces=[]
                         {% for face in obj.file_details.faces %}
                             data = { 
-                                'name': 'TST', 'x': '{{face.locn[3]}}', 'y': '{{face.locn[0]}}', 'w': '{{face.locn[1]-face.locn[3]}}', 'h':'{{face.locn[2]-face.locn[0]}}' 
+                                'x': '{{face.locn[3]}}', 'y': '{{face.locn[0]}}', 
+                                'w': '{{face.locn[1]-face.locn[3]}}', 'h':'{{face.locn[2]-face.locn[0]}}' 
                                 }
                             {% if face.refimg %}
                                 data['who']='{{face.refimg.person.tag}}'
@@ -126,3 +127,22 @@
             </center>
 </div class="container">
 {% endblock main_content %}
+{% block script_content %}
+<script>
+$( document ).keydown(function(event) {
+    switch (event.key) 
+    {
+        case "Left": // IE/Edge specific value
+        case "ArrowLeft":
+            $('#la').click()
+            break;
+        case "Right": // IE/Edge specific value
+        case "ArrowRight":
+            $('#ra').click()
+            break;
+        default:
+            return; // Quit when this doesn't handle the key event.
+    }
+});
+</script>
+{% endblock script_content %}