fixed blabla lightbox #1969

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -2158,6 +2158,7 @@ article.card{
       margin:0 $column_goutiere 0 0;
       img{
         width:100%;
+        cursor: pointer;
       }
     }
   }
@@ -2178,6 +2179,7 @@ article.card{
       margin:0 $column_goutiere $column_goutiere*0.6 0;
       height:$card_height / 2;
       background-size: cover;
+      cursor: pointer;
     }
 		@include col-mediaquery-max(3){
 			display: flex;

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -31,7 +31,7 @@
               :src="image_accroche.url"
               :alt="image_accroche.alt"
               :title="image_accroche.title"
-              @click="setLightboxIndex(0)"
+              @click="setcoolLightBoxIndex(0)"
             />
           </figure>
         </section>
@@ -62,20 +62,13 @@
       </div> <!-- //col-left -->
       <div class="col col-right">
         <section class="body" v-html="article.body"></section>
-        <CoolLightBox
-          :items="lightbox_items"
-          :index="lightbox_index"
-          :loop="true"
-          srcName="url"
-          @close="lightbox_index = null">
-        </CoolLightBox>
         <div class="gallery-wrapper">
           <div
             class="image"
             v-for="(image, imageIndex) in lightbox_items"
             v-if="imageIndex > 0"
             :key="imageIndex"
-            @click="setLightboxIndex(imageIndex)"
+            @click="setcoolLightBoxIndex(imageIndex)"
             :style="{ backgroundImage: 'url(' + image.thumb + ')' }"
           ></div>
         </div>
@@ -156,7 +149,9 @@ export default {
   },
   computed: {
     ...mapState({
-      items: state => state.Blabla.items
+      items: state => state.Blabla.items,
+      coolLightBoxItems: state => state.Common.coolLightBoxItems,
+      coolLightBoxIndex: state => state.Common.coolLightBoxIndex
     })
   },
   created(){
@@ -166,7 +161,9 @@ export default {
     ...mapActions({
       getItems: 'Blabla/getItems',
       getItemIndex: 'Blabla/getItemIndex',
-      getPrevNextItems: 'Blabla/getPrevNextItems'
+      getPrevNextItems: 'Blabla/getPrevNextItems',
+      setcoolLightBoxItems: 'Common/setcoolLightBoxItems',
+      setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
     }),
     getArticle(){
       console.log('getArticle', this.$route)
@@ -278,6 +275,7 @@ export default {
       }
 
       console.log('Article this.content.lightbox_items', this.lightbox_items)
+      this.setcoolLightBoxItems(this.lightbox_items)
 
       // update main page title
       this.$store.commit('Common/setPagetitle', article.title)
@@ -293,9 +291,6 @@ export default {
         name:`article`,
         params: { alias:alias, id: pn.nid }
       })
-    },
-    setLightboxIndex(index) {
-      this.lightbox_index = index
     }
   },
   components: {