activated lightbox on cards, started to dev modal-card

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -1,6 +1,8 @@
 <template>
   <article class="card search-card">
-    <header>
+    <header
+      @click="openModalCard"
+    >
       <h1>{{ item.title }}</h1>
       <h4>{{ item.field_short_description }}</h4>
       <span class="ref">{{ item.field_reference }}</span>
@@ -34,27 +36,43 @@
         <img
           class="lazy"
           v-lazy="index"
-          :data-src="img.url"
+          :data-src="img.img_styles.card_medium"
           :title="img.title"
         />
-        <img class="blank" :src="blanksrc">
+        <img
+          class="blank"
+          :src="blanksrc"
+          @click="lightbox_index = index"
+        >
       </figure>
     </section>
+    <CoolLightBox
+      :items="item.images"
+      :index="lightbox_index"
+      srcName="src"
+      loop="true"
+      @close="lightbox_index = null">
+    </CoolLightBox>
   </article>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 import cardMixins from 'vuejs/components/cardMixins'
+import ModalCard from 'vuejs/components/Content/ModalCard'
 
 export default {
   name: "Card",
   props: ['item'],
   mixins: [cardMixins],
+  components: {
+    ModalCard
+  },
   data() {
     return {
       blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
-      loadingFlag: false
+      loadingFlag: false,
+      lightbox_index: null
     }
   },
   computed: {
@@ -91,6 +109,17 @@ export default {
           this.loadingFlag = false;
         })
       }
+    },
+    openModalCard (e) {
+      this.$modal.show(
+        ModalCard,
+        { item: this.item },
+        {
+          draggable: true,
+          width: '850px',
+          height: '610px'
+        }
+      )
     }
   }
 }