diff --git a/templates/files.html b/templates/files.html
index d8b936c..ae0cd42 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -100,8 +100,7 @@
                 {% endif %}
             {% endif %}
             {% if obj.type.name != "Directory" %}
-                <center>
-                    <figure class="figure px-1">
+                    <figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1">
                         {% if obj.type.name=="Image" %}
                             <a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img></a>
                         {% elif obj.type.name == "Video" %}
@@ -114,7 +113,6 @@
                         {% endif %}
                         {# finding text distracting, <figcaption style="font-size:12px;" class="figure-caption text-center">{{obj.name}}</figcaption> #}
                     </figure>
-                </center>
             {% endif %}
         {% endfor %}
         {% if grouping == "None" %}
@@ -132,6 +130,53 @@ function ChangeSize(clicked_button,sz)
 	$('#size').val(sz)
 }
 
+// function that finds all next elements of the selector we use - works better
+// than jauery nextAll as it stops when I use any grouping div to break up the
+// .figures
+$.fn.findNextAll = function( selector ){
+      var that = this[ 0 ],
+          selection = $( selector ).get();
+      return this.pushStack(
+         // if there are no elements in the original selection return everything
+         !that && selection ||
+         $.grep( selection, function( n ){
+            return [4,12,20].indexOf( that.compareDocumentPosition( n ) ) > -1
+         // if you are looking for previous elements it should be [2,10,18]
+         })
+      );
+   }
+
+// e == event (can see if shift/ctrl held down while left-clicking
+// el == element the click is on
+// this allows single-click to select, ctrl-click to (de)select 1 item, and
+// shift-click to add all elements between highlighted area and clicked area,
+// whether you click after highlight or before
+function DoSel(e, el)
+{
+    if( e.ctrlKey )
+    {
+        $(el).toggleClass('highlight')
+        return
+    }
+    if( e.shiftKey )
+    {
+        st=Number($('.highlight').first().attr('img'))
+        end=Number($('.highlight').last().attr('img'))
+        clicked=Number($(el).attr('img'))
+        if( clicked > end )
+            $('.figure').slice( end, clicked+1 ).addClass('highlight')
+        else
+            $('.figure').slice( clicked, st ).addClass('highlight')
+        return
+    }
+    $('.highlight').removeClass('highlight')
+    $(el).addClass('highlight')
+}
+
+$('.figure').click( function(e) { DoSel(e, this ); return false; });
+$('.figure').contextmenu( function(e) { console.log('do own context-menu'); return false; });
+
+
 $(document).ready(function() {
     if( {{offset}} == 0 )
     {