Click here to open the image gallery.

Usage

Npm with single file component

Install @asot/glitter:

npm install @asot/glitter --save

Then register Glitter in your components and use it:

<template>
  <div id="app">
    <glitter v-bind:images="[
      '/path/to/image',
      // Or you can specify a caption
      // via object notation.
      { src: '/path/to/image',
        caption: 'Hello @asot/glitter!' },
    ]">
      <p>Click here to open the image gallery.</p>
    </glitter>
  </div>
</template>

<script>
import Glitter from '@asot/glitter';
import '@asot/glitter/dist//Glitter.css'

export default {
  name: 'app',
  components: {
    Glitter,
  }
}
</script>

Browser

Include @asot/glitter in your page then use it.

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@asot/glitter/dist/Glitter.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@asot/glitter/dist//Glitter.css">

<div id="app">
  <glitter v-bind:images="[
    '/path/to/image',
    // Or you can specify a caption
    // via object notation.
    { src: '/path/to/image',
      caption: 'Hello @asot/glitter!' },
  ]">
    <p>Click here to open the image gallery.</p>
  </glitter>
</div>

<script>
// Local Registration
new Vue({
  components: {
    Glitter
  }
}).$mount('#app')
</script>

API

• English
• Japanese