1.0.12 • Published 1 year ago

vue-awesome-image-gallery v1.0.12

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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

PropertyDefault ValueDescription
altAn image.Alt tag applied to any entry in images that does not have one specified.
disable-zoomfalseDisables the ability to zoom in on the active image on hover.
hide-active-image-on-zoomfalseOnly show the zoomed image while hovering.
images*undefinedAn array of AwesomeImage objects. See interface definition.
scale1.5A constant representing how much to scale the active image on hover.

Events

EventDescription
changedEmitted when a thumbnail is selected.
loadedEmitted when the selected image has loaded.
resizedEmitted 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.