1. vue3-igallery

vue3-igallery

vue3-igallery

Full featured vue3 gallery, No dependencies, easy to install and use.

Features & characteristics:

  • No dependencies
  • Simple gallery for image viewing
  • Scale, Zoom, Rotate and many more option
  • Preload image for faster swiping
  • Mobile/Touch friendly
  • Fully configurable (see props list below)

JSFiddle - Demo

Example JSFiddle – Use this for issue reproduction.

Install & basic usage

 npm install vue3-igallery
<template>
  <div>
    <igallery :show="isGalleryEnabled"
              :start-index="index"
              :images="images"
             @onHide="isGalleryEnabled = false"
     ></igallery>
   
     <img
         style="width: 100%; height: auto"
         :key="image" v-for="(image, iindex) in images"
         :src="image" 
         @click="index = iindex;isGalleryEnabled = true"/>
  </div>
</template>

<script>
import IGallery from 'vue3-igallery'
export default {
    components: { IGallery },
   
    setup() {
        let isGalleryEnabled = ref(false);
        let i = 0;
        let index = ref(0);

        return {
          images: [`https://picsum.photos/1200/800?req=${i++}`,
            `https://picsum.photos/1920/1200?req=${i++}`,
            `https://picsum.photos/1200/800?req=${i++}`,
            `https://picsum.photos/1920/800?req=${i++}`,
            `https://picsum.photos/1800/800?req=${i++}`,
            `https://picsum.photos/1200/800?req=${i++}`,
          ],
          isGalleryEnabled,
          index,
        }
  }
}
</script>

Contributing

 # serve with hot reload at localhost:8080
npm run dev

# distribution build with minification
npm run bundle

Buy Me A Coffee