How to disable full screen for images

[mehul-dev]

I want to disable the fullScreen option but with the current code that i am trying to implement i am not able to do.

Demo : https://jsfiddle.net/q8cv372m/3/

Is it the right way or is there any other approach to solve above problem as i have read blueimp gallery documentation i have found only this guide line that states to handle the full screen option in their library

Documentation Link : https://github.com/blueimp/Gallery/blob/master/README.md#fullscreen-options

Also using Vue Dev tools when i manually changed the state of fullScreen option nothing seems to have impact either way

[hsweif]

Hi, @mehul-dev. I found a pretty tricky way. Just replace the index in data() to something like curIndex and rewrite the click function. For example, below is part of my code:

<template>
  <div>
    <gallery :images="images" :index="index" @close="index = null"></gallery>
    <div @click="handleClick(imageIndex)" v-for="(image, imageIndex) in images" :key="imageIndex">
      <img :src="image" alt="fail to load" :class="{selected: (imageIndex === curIndex)}"/>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import VueGallery from "vue-gallery";
export default Vue.extend({
  data() {
    return {
      curIndex: -1
    };
  },
  props: {
    images: {
      type: Array,
      default: []
    },
  },
  components: {
    gallery: VueGallery
  },
  methods: {
    handleClick(imageIndex) {
      this.$emit("selected", imageIndex);
      this.curIndex = imageIndex;
    }
  }
});

<style lang="scss" scoped>
img {
  float: left;
  width: 30%;
  margin-left: 3%;
  margin-top: 5px;
}
.selected {
  border: 3px solid
}
</style>

When the image was clicked, I can get the corresponding index and change the CSS of selected images without trigger fullscreen effect. If you had found a better way, please share it with me thx.