A Simple Image Gallery Component For Vue.js

Lingallery is a simple image gallery component for Vue.js. Displays a large image with thumbnails below as you can see in the demo. You can select several settings to adapt the gallery to your needs.

vue gallery component, vue image gallery with thumbnail, vuetify image gallery, vue gallery example, vue lightbox, vue photo grid

[Live] Responsive Lightbox Image Gallery jQuery Plugin

How to make use of it:

Install and download:

# NPM
$ npm install lingallery --save

1. You can use it inline:

<lingallery :iid.sync="currentId" :width="600" :height="400" :items="[
    {id:'someid1', src: 'https://picsum.photos/600/400/?image=0', thumbnail: 'https://picsum.photos/64/64/?image=0', alt: 'Some alt text', caption: 'Some Caption'},
    {id:'someid2', src: 'https://picsum.photos/600/400/?image=10', thumbnail: 'https://picsum.photos/64/64/?image=10', alt: 'Another alt text', caption: 'Another Caption'},
    {id:'someid3', src: 'https://picsum.photos/400/600/?image=20', thumbnail: 'https://picsum.photos/64/64/?image=20'}
]"/>

2. Remember to register the component:

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

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

3. Create a component add this:

<template>
  <lingallery :iid.sync="currentId" :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',
          id: 'someid1'
        },
        {
          src: 'https://picsum.photos/600/400/?image=10',
          thumbnail: 'https://picsum.photos/64/64/?image=10'
        },
        currentId: null
      ]};
    },
    components: {
      Lingallery
    }
  }
</script>

Simple Image Gallery Component, Lingallery Plugin/Github