Sheets: use lightgallery to display images on sheets

11 files changed, 59 insertions, 22 deletions

diff --git a/archaeological_context_records/templates/ishtar/sheet_contextrecord.html b/archaeological_context_records/templates/ishtar/sheet_contextrecord.html
index 4fa98c6a9..cca8f5375 100644
--- a/archaeological_context_records/templates/ishtar/sheet_contextrecord.html
+++ b/archaeological_context_records/templates/ishtar/sheet_contextrecord.html
@@ -12,9 +12,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">
-            {% if item.image %}
-            <img class='card-img-top' src="{{item.thumbnail.url}}">
-            {% endif%}
+            {% include "ishtar/blocks/window_image.html" %}
             <div class="card-body">
                 <p class="card-text">
                 <p class='window-refs'>{{ item.parcel.short_label }}</p>
diff --git a/archaeological_files/templates/ishtar/sheet_file.html b/archaeological_files/templates/ishtar/sheet_file.html
index 20684baf9..b01fe77f6 100644
--- a/archaeological_files/templates/ishtar/sheet_file.html
+++ b/archaeological_files/templates/ishtar/sheet_file.html
@@ -17,9 +17,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">
-      {% if item.image %}
-      <img class='card-img-top' src="{{item.thumbnail.url}}">
-      {% endif%}
+      {% include "ishtar/blocks/window_image.html" %}
       <div class="card-body">
         <p class="card-text">
             <p class='window-refs'>{{item.full_internal_ref|default:''}}</p>
diff --git a/archaeological_finds/templates/ishtar/sheet_find.html b/archaeological_finds/templates/ishtar/sheet_find.html
index 237a4d748..67cd479c3 100644
--- a/archaeological_finds/templates/ishtar/sheet_find.html
+++ b/archaeological_finds/templates/ishtar/sheet_find.html
@@ -12,9 +12,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">
-      {% if item.image %}
-      <img class='card-img-top' src="{{item.thumbnail.url}}">
-      {% endif%}
+      {% include "ishtar/blocks/window_image.html" %}
       <div class="card-body">
         <p class="card-text">
             <p class="window-refs" title="{% trans 'Free ID' %}">{{ item.label|default:"" }}</p>
diff --git a/archaeological_finds/templates/ishtar/sheet_treatment.html b/archaeological_finds/templates/ishtar/sheet_treatment.html
index c1da714c2..21f0e5370 100644
--- a/archaeological_finds/templates/ishtar/sheet_treatment.html
+++ b/archaeological_finds/templates/ishtar/sheet_treatment.html
@@ -12,9 +12,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">
-            {% if item.image %}
-            <img class='card-img-top' src="{{item.thumbnail.url}}">
-            {% endif%}
+            {% include "ishtar/blocks/window_image.html" %}
             <div class="card-body">
                 <p class="card-text">
                     <p class="window-refs">{{ item.label|default:"" }}</p>
diff --git a/archaeological_operations/templates/ishtar/sheet_operation.html b/archaeological_operations/templates/ishtar/sheet_operation.html
index 24e08eacb..2309262fc 100644
--- a/archaeological_operations/templates/ishtar/sheet_operation.html
+++ b/archaeological_operations/templates/ishtar/sheet_operation.html
@@ -12,9 +12,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">
-        {% if item.image %}
-        <img class='card-img-top' src="{{item.thumbnail.url}}">
-        {% endif%}
+        {% include "ishtar/blocks/window_image.html" %}
         <div class="card-body">
             <div class="row">
                 <div class="col main">
diff --git a/archaeological_warehouse/templates/ishtar/sheet_container.html b/archaeological_warehouse/templates/ishtar/sheet_container.html
index 9522c302c..d29d74c00 100644
--- a/archaeological_warehouse/templates/ishtar/sheet_container.html
+++ b/archaeological_warehouse/templates/ishtar/sheet_container.html
@@ -11,9 +11,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">
-            {% if item.image %}
-            <img class='card-img-top' src="{{item.thumbnail.url}}">
-            {% endif%}
+            {% include "ishtar/blocks/window_image.html" %}
             <div class="card-body">
                 <p class="card-text">
                     <p class="window-refs">{{ item.reference|default:"" }}</p>
diff --git a/archaeological_warehouse/templates/ishtar/sheet_warehouse.html b/archaeological_warehouse/templates/ishtar/sheet_warehouse.html
index 03a8eec5c..c7a1314d8 100644
--- a/archaeological_warehouse/templates/ishtar/sheet_warehouse.html
+++ b/archaeological_warehouse/templates/ishtar/sheet_warehouse.html
@@ -11,9 +11,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">
-            {% if item.image %}
-            <img class='card-img-top' src="{{item.thumbnail.url}}">
-            {% endif%}
+            {% include "ishtar/blocks/window_image.html" %}
             <div class="card-body">
                 <p class="card-text">
                     <p class="window-refs">{{ item.name|default:"" }}</p>
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>