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