media: fix the media gallery (now has a lightbox again)

dolweb/media/templates/media-all.html

@@ -1,12 +1,31 @@
 {% extends "_base.html" %}
 
 {% load i18n %}
+{% load staticfiles %}
 {% load thumbnail %}
 
 {% block "metadescr" %}{% trans "View all the user-contributed screenshots of the Dolphin Emulator: GameCube and Wii games in HD." %}{% endblock %}
 
 {% block "title" %}{% trans "Screenshots gallery" %}{% endblock %}
 
+{% block "extracss" %}
+<link href="{% static "css/ekko-lightbox.min.css" %}" rel="stylesheet">
+{% endblock %}
+
+{% block "extrajs" %}
+<script src="{% static "js/ekko-lightbox.min.js" %}"></script>
+<script>
+$(document).ready(function($) {
+    $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
+        event.preventDefault();
+        return $(this).ekkoLightbox({
+            always_show_close: true
+        });
+    });
+});
+</script>
+{% endblock %}
+
 {% block "body" %}
 <div class="page-header">
     <h1>{% trans "Media gallery" %}</h1>
@@ -15,7 +34,7 @@
 <div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery">
     {% for image in images %}
     {% thumbnail image.image "x1080" upscale=False format="JPEG" quality=80 as big %}
-    <a href="{{ big.url }}" title="{{ image.game_name }}" rel="gallery">
+    <a href="{{ big.url }}" data-toggle="lightbox" data-gallery="media" data-title="{{ image.game_name }}">
         {% thumbnail image.image "150x150" crop="center" as small %}
         <img style="width: 150px; height: 150px;" src="{{ small.url }}" alt="{{ image.game_name }}">
         {% endthumbnail %}

dolweb/static/css/ekko-lightbox.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Lightbox for Bootstrap 3 by @ashleydw
+ * https://github.com/ashleydw/lightbox
+ *
+ * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
+ */.ekko-lightbox-container{position:relative}.ekko-lightbox-nav-overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%}.ekko-lightbox-nav-overlay a{z-index:100;display:block;width:49%;height:100%;padding-top:45%;font-size:30px;color:#fff;text-shadow:2px 2px 4px #000;opacity:0;filter:dropshadow(color=#000000,offx=2,offy=2);-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.ekko-lightbox-nav-overlay a:empty{width:49%}.ekko-lightbox a:hover{text-decoration:none;opacity:1}.ekko-lightbox .glyphicon-chevron-left{left:0;float:left;padding-left:15px;text-align:left}.ekko-lightbox .glyphicon-chevron-right{right:0;float:right;padding-right:15px;text-align:right}.ekko-lightbox .modal-footer{text-align:left}