Sheets: use lightgallery to display images on sheets

4 files changed, 52 insertions, 1 deletions

diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index b2f0b055c..8608448e7 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -19,6 +19,11 @@
             src="{{STATIC_URL}}datatables/datatables.min.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}datatables/dataTables.bootstrap4.min.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}datatables/dataTables.buttons.min.js?ver={{VERSION}}"></script>
+    <script src="{{STATIC_URL}}lightgallery/js/lightgallery.min.js?ver={{VERSION}}"></script>
+    <!-- lightgallery plugins -->
+    <script src="{{STATIC_URL}}lightgallery/js/lg-zoom.min.js?ver={{VERSION}}"></script>
+    <script src="{{STATIC_URL}}lightgallery/js/lg-fullscreen.min.js?ver={{VERSION}}"></script>
+    <script src="{{STATIC_URL}}lightgallery/js/lg-thumbnail.min.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/ishtar.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript"
             src="{{STATIC_URL}}datatables/i18n/{{LANGUAGE_CODE}}.js?ver={{VERSION}}"></script>
@@ -45,6 +50,7 @@
     <link rel="stylesheet"
           href="{{STATIC_URL}}datatables/datatables.min.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}datatables/dataTables.bootstrap4.min.css?ver={{VERSION}}">
+    <link type="text/css" rel="stylesheet" href="{{STATIC_URL}}lightgallery/css/lightgallery.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}media/styles.css?ver={{VERSION}}">
     {% for url_css in JQGRID_CSS %}<link rel="stylesheet" href="{{url_css}}?ver={{VERSION}}">{% endfor %}
     {{EXTRA_CSS|safe}}
diff --git a/ishtar_common/templates/ishtar/blocks/window_image.html b/ishtar_common/templates/ishtar/blocks/window_image.html
new file mode 100644
index 000000000..4b8e67ea9
--- /dev/null
+++ b/ishtar_common/templates/ishtar/blocks/window_image.html
@@ -0,0 +1,42 @@
+{% if item.image %}
+<div id="lightgallery-{{window_id}}">
+    <a href="{{item.image.url}}">
+        <img class='card-img-top' src="{{item.thumbnail.url}}">
+    </a>
+    {% comment %}
+    <!-- gallery test -->
+    <a href="{{item.image.url}}"
+       style="width:60px;display:inline-block;padding: 0.2em;">
+        <img class='card-img-top' src="{{item.thumbnail.url}}">
+    </a>
+    <a href="{{item.image.url}}"
+       style="width:60px;display:inline-block;padding: 0.2em;">
+        <img class='card-img-top' src="{{item.thumbnail.url}}">
+    </a>
+    <a href="{{item.image.url}}"
+       style="width:60px;display:inline-block;padding: 0.2em;">
+        <img class='card-img-top' src="{{item.thumbnail.url}}">
+    </a>
+    <a href="{{item.image.url}}"
+       style="width:60px;display:inline-block;padding: 0.2em;">
+        <img class='card-img-top' src="{{item.thumbnail.url}}">
+    </a>
+    <a href="{{item.image.url}}"
+       style="width:60px;display:inline-block;padding: 0.2em;">
+        <img class='card-img-top' src="{{item.thumbnail.url}}">
+    </a>
+    <a href="{{item.image.url}}"
+       style="width:60px;display:inline-block;padding: 0.2em;">
+        <img class='card-img-top' src="{{item.thumbnail.url}}">
+    </a>
+    <a href="{{item.image.url}}"
+       style="width:60px;display:inline-block;padding: 0.2em;">
+        <img class='card-img-top' src="{{item.thumbnail.url}}">
+    </a>
+    <a href="{{item.image.url}}"
+       style="width:60px;display:inline-block;padding: 0.2em;">
+        <img class='card-img-top' src="{{item.thumbnail.url}}">
+    </a>
+    {% endcomment %}
+</div>
+{% endif%}
diff --git a/ishtar_common/templates/ishtar/sheet.html b/ishtar_common/templates/ishtar/sheet.html
index ee57d312d..8cfbe22ca 100644
--- a/ishtar_common/templates/ishtar/sheet.html
+++ b/ishtar_common/templates/ishtar/sheet.html
@@ -80,6 +80,9 @@
                             '', function(){$("#{{window_id}}").remove();},
                             true);
             });
+            {% if item.image %}
+            lightGallery(document.getElementById('lightgallery-{{window_id}}'));
+            {% endif%}
         });
         </script>
         {% endblock %}
diff --git a/ishtar_common/templates/ishtar/sheet_source.html b/ishtar_common/templates/ishtar/sheet_source.html
index a1a8948dc..bedcb587e 100644
--- a/ishtar_common/templates/ishtar/sheet_source.html
+++ b/ishtar_common/templates/ishtar/sheet_source.html
@@ -9,7 +9,7 @@
 <div class="row">
     <div class="offset-lg-4 col-lg-4 offset-md-3 col-md-6 offset-sm-1 col-sm-10 col-12">
         <div class="card">
-            <img class='card-img-top' src="{{item.thumbnail.url}}">
+            {% include "ishtar/blocks/window_image.html" %}
         </div>
     </div>
 </div>