close #1595 Enhancement: Not able to see the big size of app screenshots (missing modal)

package.json

@@ -43,6 +43,7 @@
         "vue-chartjs": "^3.4.0",
         "vue-clipboard2": "^0.3.1",
         "vue-flatpickr-component": "^8.1.3",
+        "vue-image-lightbox": "^7.1.3",
         "vue-router": "^3.1.3",
         "vue2-transitions": "^0.3.0"
     },

public/css/custom.css

@@ -829,3 +829,11 @@ table .align-items-center td span.badge {
 .form-group .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e")
 }
+
+/*--lightbox Start--*/
+.vue-lb-info {
+    position: initial !important;
+    background-color: rgb(60 63 114) !important;
+    padding-top: 8px !important;
+}
+/*--lightbox Finish--*/

resources/assets/js/components/AkauntingCarousel.vue

@@ -18,7 +18,7 @@
             </el-carousel-item>
 
             <el-carousel-item v-for="(screenshot, index) in screenshots" :key="index">
-                <img class="d-block w-100 carousel-frame" height="365px" :src="screenshot.path_string" :alt="screenshot.alt_attribute">
+                <img @click="openGallery(index)" class="d-block w-100 carousel-frame" height="365px" :src="screenshot.path_string" :alt="screenshot.alt_attribute">
                 <div class="carousel-description py-2" v-if="screenshot.description">
                     {{ screenshot.description }}
                 </div>
@@ -27,12 +27,26 @@
                 </div>
             </el-carousel-item>
         </el-carousel>
+
+      <LightBox
+        ref="lightbox"
+        :media="media"
+        :show-caption="true"
+        :show-light-box="false"
+      />
     </div>
 </template>
 
 <script>
+import Vue from 'vue';
 import {Image, Carousel, CarouselItem} from 'element-ui';
 
+import LightBox from 'vue-image-lightbox';
+import 'vue-image-lightbox/dist/vue-image-lightbox.min.css';
+import VueLazyLoad from 'vue-lazyload';
+
+Vue.use(VueLazyLoad);
+
 export default {
     name: "akaunting-carousel",
 
@@ -40,6 +54,7 @@ export default {
         [Image.name]: Image,
         [Carousel.name]: Carousel,
         [CarouselItem.name]: CarouselItem,
+        LightBox
     },
 
     props: {
@@ -108,6 +123,36 @@ export default {
             default: 'horizontal',
             description: "display direction (horizontal/vertical)"
         }
+    },
+
+    mounted() {
+        let media = [];
+
+        if (this.screenshots.length) {
+            let name = this.name;
+
+            this.screenshots.forEach(function(screenshot) {
+                media.push({ // For image
+                    thumb: screenshot.path_string,
+                    src: screenshot.path_string,
+                    caption: (screenshot.description.length) ? screenshot.description : name,
+                });
+            });
+        }
+
+        this.media = media;
+    },
+
+    data: function () {
+        return {
+            media: [],
+        }
+    },
+
+    methods: {
+        openGallery(index) {
+            this.$refs.lightbox.showImage(index)
+        }
     }
 }
 </script>