javascript - Expand the image by clicking on it (vuetify) - Stack Overflow

admin管理员组

文章数量:1359492

I am continuing to use vuetify for my small personal project to study vue and vuetify well, i am using v-col and v-img to create a gallery of images and i would like to click on each image to go to full screen (in style lightbox) but it seems that vuetify doesn't have this native capability, is it possible? it seems strange that there is not. Can anyone suggest me a solution? Sorry maybe the silly question but as said i'm a beginner

I am attaching the code

    <template>
  <div class="gallery">
    <h1 class="subtitle-1 grey--text pa-2 d-flex justify-center">Galleria</h1>
   <v-divider></v-divider>
   <v-container class="my-5">
       <div>
         <v-row>
    <v-col v-for="item in items" :key="item.id" class="d-flex child-flex" cols="4" >
      <v-img :src="item.src" contain class="grey lighten-2">
        <template v-slot:placeholder>
          <v-row class="fill-height ma-0" align="center" justify="center">
            <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
          </v-row>
        </template>
      </v-img>
    </v-col>
  </v-row>
       </div>
   </v-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Gallery',

  data(){
    return {
      items: [
        {id: 1, src: require("../assets/images/img1.jpg")},
        {id: 2, src: require("../assets/images/img2.jpg")},
        {id: 3, src: require("../assets/images/img3.jpg")},
        {id: 4, src: require("../assets/images/img4.jpg")},
        {id: 5, src: require("../assets/images/img5.jpg")},
        {id: 6, src: require("../assets/images/img6.jpg")},
        {id: 7, src: require("../assets/images/img7.jpg")},
        {id: 8, src: require("../assets/images/img8.jpg")},
      ]
    }
  }

}
</script>

I am continuing to use vuetify for my small personal project to study vue and vuetify well, i am using v-col and v-img to create a gallery of images and i would like to click on each image to go to full screen (in style lightbox) but it seems that vuetify doesn't have this native capability, is it possible? it seems strange that there is not. Can anyone suggest me a solution? Sorry maybe the silly question but as said i'm a beginner

I am attaching the code

    <template>
  <div class="gallery">
    <h1 class="subtitle-1 grey--text pa-2 d-flex justify-center">Galleria</h1>
   <v-divider></v-divider>
   <v-container class="my-5">
       <div>
         <v-row>
    <v-col v-for="item in items" :key="item.id" class="d-flex child-flex" cols="4" >
      <v-img :src="item.src" contain class="grey lighten-2">
        <template v-slot:placeholder>
          <v-row class="fill-height ma-0" align="center" justify="center">
            <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
          </v-row>
        </template>
      </v-img>
    </v-col>
  </v-row>
       </div>
   </v-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Gallery',

  data(){
    return {
      items: [
        {id: 1, src: require("../assets/images/img1.jpg")},
        {id: 2, src: require("../assets/images/img2.jpg")},
        {id: 3, src: require("../assets/images/img3.jpg")},
        {id: 4, src: require("../assets/images/img4.jpg")},
        {id: 5, src: require("../assets/images/img5.jpg")},
        {id: 6, src: require("../assets/images/img6.jpg")},
        {id: 7, src: require("../assets/images/img7.jpg")},
        {id: 8, src: require("../assets/images/img8.jpg")},
      ]
    }
  }

}
</script>

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow asked Feb 14, 2021 at 12:01 Daniele CadicinaDaniele Cadicina 9933 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I thing v-overlay ponent is exactly what you need. Just put v-img or simple img with correct src attribute inside of it.

You could toggle the fullscreen onClick @click="toggleFullscreen(element)" on your img, but you would need to provide the Element e.g. by Ref or Id. An example toggle method:

toggleFullscreen(element) {
   if (document.fullscreenElement) { 
     return document.exitFullscreen() // exit fullscreen on next click
   }
   if (element.requestFullscreen) {
     element.requestFullscreen()
   } else if (this.element.webkitRequestFullscreen) {
     element.webkitRequestFullscreen() // Safari
   } else if (this.element.msRequestFullscreen) {
     element.msRequestFullscreen() // IE11
   }
 }

References: https://www.w3schools./jsref/met_element_requestfullscreen.asp, https://developer.mozilla/en-US/docs/Web/API/Element/requestFullScreen

本文标签： javascriptExpand the image by clicking on it (vuetify)Stack Overflow