Vue-awesome-image-gallery NPM

Vue Awesome Image Gallery

Vue.js 3 component that implements (what I think is) an awesome image gallery. When hovering over the active image, it is zoomed in.

Demo

Usage

Install package:

npm i vue-awesome-image-gallery

Use the component:

<template>
  <awesome-image-gallery
      :images="[
          {
            url: 'https://ajility.dev/github/vue-awesome-image-gallery/1.webp',
          },
          {
            url: 'https://ajility.dev/github/vue-awesome-image-gallery/2.webp',
          },
          {
            url: 'https://ajility.dev/github/vue-awesome-image-gallery/3.webp',
          }
      ]"
      :scale="0.9"
  />
</template>

<script setup>
import AwesomeImageGallery from './AwesomeImageGallery.vue'
</script>

Props

* Indicates a property is required

Property	Default Value	Description
`alt`	`An image.`	Alt tag applied to any entry in `images` that does not have one specified.
`disable-zoom`	`false`	Disables the ability to zoom in on the active image on hover.
`hide-active-image-on-zoom`	`false`	Only show the zoomed image while hovering.
`images`*	`undefined`	An array of `AwesomeImage` objects. See interface definition.
`scale`	`1.5`	A constant representing how much to scale the active image on hover.

Events

Event	Description
`changed`	Emitted when a thumbnail is selected.
`loaded`	Emitted when the selected image has loaded.
`resized`	Emitted when the image is resized.

Special Note

This package is based on the unmaintained packages of GitHub users @174n and @Intera.It was ported to Vue 3 and given some TLC to make it more useful.