Add fullscreen display support to Galleria theme

It adds a link just below the gallery-display to enter fullscreen.
Additionally a keybind on the 'f' key is added to make toggling
fullscreen easier.

AUTHORS

@@ -4,6 +4,7 @@ alphabetical order):
 - Christophe-Marie Duquesne
 - Jonas Kaufmann
 - Antoine Pitrou
+- Giel van Schijndel
 - Matthias Vogelgesang
 - Vikram Shirgur
 - Yuce Tekol

sigal/themes/galleria/static/css/style.css

@@ -111,6 +111,11 @@ header h1 a:hover, header h2 a:hover {
   margin: 0 auto;
 }
 
+/* fullscreen display link */
+#fullscreen {
+  cursor: pointer;
+}
+
 /* footer */
 footer {
   clear: both;

sigal/themes/galleria/templates/index.html

@@ -79,7 +79,8 @@
               <a href="{{ media.filename }}">
                 <img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
                     data-title="{{ media.title if media.title else media.filename }}"
-                    data-description="{{ img_description(media) }}"/>
+                    data-description="{{ img_description(media) }}"
+                    {% if media.big %} data-big="{{ media.big }}"{% endif %} />
               </a>
             {% endif %}
             {% if media.type == "video" %}
@@ -94,6 +95,7 @@
             {% endif %}
           {% endfor %}
         </div>
+        <a id="fullscreen">fullscreen</a>
         {% endif %}
 
         {% if album.zip %}
@@ -134,8 +136,15 @@
     Galleria.ready(function() {
         this.attachKeyboard({
             right: this.next,
-            left: this.prev
-         });
+            left: this.prev,
+            /* Toggle fullscreen display on press of 'f' key */
+            0x46: this.toggleFullscreen,
+        });
+
+        var gallery = this;
+        $('#fullscreen').click(function() {
+          gallery.toggleFullscreen();
+        });
      });
 
     </script>