Lingallery

Lingallery is a simple image gallery component for Vue.js. It displays a large image with thumbnails below as you can see in the demo. More features are coming soon.

Please note: Since Lingallery is at a very early development state you should probably not yet use it in a production project.

Demo

Install

npm i lingallery

Usage

Here are some examples of how to use Lingallery in a .vue file component or inline.

Inline usage

You can use it inline:

<lingallery :width="600" :height="400" :items="[
    {src: 'https://picsum.photos/600/400/?image=0', thumbnail: 'https://picsum.photos/64/64/?image=0', caption: 'Some Caption'},
    {src: 'https://picsum.photos/600/400/?image=10', thumbnail: 'https://picsum.photos/64/64/?image=10', caption: 'Another Caption'},
    {src: 'https://picsum.photos/400/600/?image=20', thumbnail: 'https://picsum.photos/64/64/?image=20'}
]"/>

Remember to register the component:

import Lingallery from 'lingallery';
Vue.component('lingallery', Lingallery);

new Vue({
  el: '#app'
})

Usage in another component

Create a component Example.vue and add this:

<template>
  <lingallery :width="width" :height="height" :items="items"/>
</template>
<script>
  import Lingallery from 'lingallery';
  export default {
    data() {
      return {
        width: 600,
        height: 400,
        items: [{
          src: 'https://picsum.photos/600/400/?image=0',
          thumbnail: 'https://picsum.photos/64/64/?image=0',
          caption: 'Some Caption'
        },
        {
          src: 'https://picsum.photos/600/400/?image=10',
          thumbnail: 'https://picsum.photos/64/64/?image=10'
        }
      ]};
    },
    components: {
      Lingallery
    }
  }
</script>

Usage with Nuxt.js

Since Lingallery uses features that are available only in the browser make sure to start rendering the component in a hook that is not running on the server like mounted () or to use webpack-node-externals and whitelist Lingallery like so:

build: {
  extend (config, { isDev, isClient, isServer }) {
    if (isServer) {
      config.externals = [
        nodeExternals({
          whitelist: [/\.(?!(?:js|json)$).{1,5}$/i, /^lingallery/]
        })
      ]
    }
  }
}

Lingallery options

You can pass some props to adapt the behavior and looks of Lingallery.

Why?

I needed a gallery that simply has a large image (without fancy lightbox features etc.) and some thumbnails below. Since I didn't find any I decided to build my own. I am pretty new to Vue.js so please be gentle if you find any errors.