fixed coollightbox

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

@@ -0,0 +1,51 @@
+<template lang="html">
+      <CoolLightBox
+      :items="coolLightBoxItems"
+      :index="coolLightBoxIndex"
+      srcName="url"
+      :loop="true"
+      :fullscreen="true"
+      @close="setcoolLightBoxIndex(null)">
+    </CoolLightBox>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+// import MA from 'vuejs/api/ma-axios'
+import router from 'vuejs/route'
+
+import CoolLightBox from 'vue-cool-lightbox'
+import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
+
+export default {
+  router,
+  // props:[],
+  data() {
+    return {
+      // isOpened: false
+    }
+  },
+  computed: {
+    ...mapState({
+      coolLightBoxItems: state => state.Common.coolLightBoxItems,
+      coolLightBoxIndex: state => state.Common.coolLightBoxIndex,
+    })
+  },
+  beforeMount() {
+
+  },
+  methods: {
+    ...mapActions({
+      setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
+    }),
+  },
+  components: {
+    CoolLightBox
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -271,23 +271,27 @@
         <img
           class="blank"
           :src="blanksrc"
-          @click="lightbox_index = index"
+          @click="setcoolLightBoxIndex(index)"
         >
       </figure>
     </section>
-    <CoolLightBox
+    <!-- <CoolLightBox
       :items="material.images"
       :index="lightbox_index"
       srcName="url"
       :loop="true"
+      :fullScreen="true"
       @close="lightbox_index = null">
-    </CoolLightBox>
+    </CoolLightBox> -->
   </article>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 
+// import CoolLightBox from 'vue-cool-lightbox'
+// import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
+
 import {
   VsaList,
   VsaItem,
@@ -317,6 +321,7 @@ export default {
   mixins: [cardMixins],
   components: {
     LinkedMaterialCard,
+    // CoolLightBox,
     VsaList,
     VsaItem,
     VsaHeading,
@@ -365,7 +370,9 @@ export default {
     ...mapState({
       csrf_token: state => state.User.csrf_token,
       flagcolls: state => state.User.flagcolls,
-      showrooms: state => state.Showrooms.showrooms_by_tid
+      showrooms: state => state.Showrooms.showrooms_by_tid,
+      coolLightBoxItems: state => state.Common.coolLightBoxItems,
+      coolLightBoxIndex: state => state.Common.coolLightBoxIndex
     }),
     collsLength() {
       return Object.keys(this.flagcolls).length
@@ -397,7 +404,9 @@ export default {
     ...mapActions({
       // refreshItem: 'Search/refreshItem',
       createFlagColl: 'User/createFlagColl',
-      flagUnflag: 'User/flagUnflag'
+      flagUnflag: 'User/flagUnflag',
+      setcoolLightBoxItems: 'Common/setcoolLightBoxItems',
+      setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
     }),
     loadMaterial(){
       console.log('loadMaterial', this.item.id)
@@ -424,6 +433,7 @@ export default {
           // setTimeout(function () {
           //   this.activateLazyLoad()
           // }.bind(this), 5)
+          this.setcoolLightBoxItems(this.material.images)
         })
         .catch(error => {
           console.warn('Issue with loadMaterial', error)

web/themes/custom/materiotheme/vuejs/store/modules/common.js

@@ -8,7 +8,9 @@ export default {
   // initial state
   state: {
     pagetitle: null,
-    hamburgerMenuToggle: document.querySelector('input#header-block-right-toggle')
+    hamburgerMenuToggle: document.querySelector('input#header-block-right-toggle'),
+    coolLightBoxItems: null,
+    coolLightBoxIndex: null
   },
 
   // getters
@@ -22,6 +24,12 @@ export default {
     },
     setHamMenuState (state, s) {
       state.hamburgerMenuToggle.checked = s
+    },
+    setcoolLightBoxItems (state, items) {
+      state.coolLightBoxItems = items
+    },
+    setcoolLightBoxIndex (state, i) {
+      state.coolLightBoxIndex = i
     }
   },
 
@@ -30,6 +38,14 @@ export default {
     openCloseHamMenu ({ dispatch, commit, state }, s) {
       console.log('openCloseHamMenu', s)
       commit('setHamMenuState', s)
+    },
+    setcoolLightBoxIndex ({ dispatch, commit, state }, i) {
+      console.log('setcoolLightBoxIndex', i)
+      commit('setcoolLightBoxIndex', i)
+    },
+    setcoolLightBoxItems ({ dispatch, commit, state }, items) {
+      console.log('setcoolLightBoxItems', items)
+      commit('setcoolLightBoxItems', items)
     }
   }