Gallery table: init gallery for gallery table

1 files changed, 21 insertions, 6 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 04957d7a2..18f83f155 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -984,7 +984,7 @@ var dt_multi_enable_disable_submit_button = function(e, dt, type, indexes){
     }
 };
 
-var render_gallery = function(data_table, table_name, nb_select){
+var render_gallery = function(data_table, table_name, nb_select, gallery_id){
     var html = '<label>' + show_msg;
     var id_select = table_name + '-length_image';
     html += ' <select name="' + id_select + '" id="id_' + id_select + '">';
@@ -996,9 +996,16 @@ var render_gallery = function(data_table, table_name, nb_select){
         html += '>' + nb + '</option>';
     }
     html += '</select> ' + entries_msg + '</label>';
-    html += "<div class='ishtar-gallery d-flex flex-wrap'>";
+    html += "<div class='ishtar-gallery d-flex flex-wrap' id='" + gallery_id + "'>";
+    var captions = '<div class="lightgallery-captions">';
 
     $.each(data_table["rows"], function(idx, data){
+        var thumb = "";
+        if ("main_image__thumbnail" in data){
+            thumb = data["main_image__thumbnail"];
+        } else {
+            thumb = static_path + "media/images/empty-image.png";
+        }
         var image = "";
         if ("main_image__image" in data){
             image = data["main_image__image"];
@@ -1013,15 +1020,21 @@ var render_gallery = function(data_table, table_name, nb_select){
         if ("name" in data){
             name = data["name"];
         }
+        var caption_id = 'lightgallery-' +  gallery_id +'-caption-' + data["id"];
         html += '<div class="card m-2">';
-        html += '<a class="thumb-image" href="#">';
-        html += '<img class="card-img-top" src="' + image + '">';
+        html += '<a data-sub-html="#'+ caption_id + '" class="thumb-image" href="' + image + '">';
+        html += '<img class="card-img-top" src="' + thumb + '">';
         html += '</a>';
         html += '<div class="card-body">';
         html += '<h4 class="card-title">' + link + " " + name + '</h4>';
         html += "</div></div>";
+        captions += '<div id="' +  caption_id + '">';
+        captions += '<span class="close">&times</span>';
+        captions += name;
+        captions += '</div>';
     });
     html += "</div>";
+    captions += '</div >';
 
     /* pagination */
     var page_total = data_table['total'];
@@ -1079,7 +1092,7 @@ var render_gallery = function(data_table, table_name, nb_select){
         page_current + 1, page_current, "Next", disabled, " next");
 
     html += '</ul></div></div>';
-    return html;
+    return captions + html;
 };
 
 var render_paginate_button = function(nb, current, label, disabled, extra_class){
@@ -1100,11 +1113,13 @@ var render_paginate_button = function(nb, current, label, disabled, extra_class)
 
 var current_image_page = 1;
 
-var register_image_paginate = function(){
+var register_image_gallery = function(gallery_id){
     $(".image-pagination .paginate_button a").click(function(){
         current_image_page = $(this).attr('data-dt-idx');
         gallery_submit_search();
     });
+    lightGallery(document.getElementById(gallery_id),
+                 {selector: '.thumb-image'}) ;
 };
 
 var main_submit_search = function(){