Light Gallery

							
                                
<template>
    <lightgallery
      :settings="galleyOptions"
      class="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1 hk-gallery"
    >
        <div
          class="col-lg-2 col-md-4 col-sm-4 mb-3"
          data-src="@/path/to/your/image.jpg"
        >
           <!-- for Images -->
            <a href="#">
                <div
                    class="gallery-img"
                    data-src="@/path/to/your/image.jpg"
                    style="background-image: url(path/to/your/image.jpg);"
                >
                </div>
            </a>

            <!-- for videos -->
            <a href="#">
                <div
                    class="gallery-img gallery-video"
                    data-src="videoUrl"
                    data-poster="@/path/to/your/image.jpg"
                    style="background-image: url(path/to/your/image.jpg);"
                >
                </div>
            </a>
        </div>
    </lightgallery>
</template>

<script>
//lightgallery
import Lightgallery from "lightgallery/vue";
// import plugins for lightgallary
import lgFullscreen from "lightgallery/plugins/fullscreen";
import lgAutoplay from "lightgallery/plugins/autoplay";
import lgZoom from "lightgallery/plugins/zoom";
import lgShare from "lightgallery/plugins/share";
import lgComment from "lightgallery/plugins/comment";
import lgVideo from "lightgallery/plugins/video";

export default {
  name: "Gallery",
  components: {
    Lightgallery,
  },
  data() {
    return {
      galleyOptions: {
        plugins: [lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo],
        speed: 500,
        mode: "lg-fade",
        thumbnail: false,
      },
    };
  },
};
</script>