CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Daniele Cadicina
Daniele Cadicina

Reputation: 99

Expand the image by clicking on it (vuetify)

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>

Upvotes: 3

Views: 8335

Answers (2)

Nicolas Durant
Nicolas Durant

Reputation: 447

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.com/jsref/met_element_requestfullscreen.asp, https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

Upvotes: 1

PythonicSpeaker
PythonicSpeaker

Reputation: 421

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

Upvotes: 7

Related Questions