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.

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.