Vuejs-Lingallery: Lingallery - Simple image gallery component for Vue which displays a large image with thumbnails below

NPM version NPM downloads License

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. You can define several settings to adapt the gallery to your needs.

Since Lingallery is at an early development state be carefull when using it in a production project.

Demo



Check out the live demo here: https://lingulo.com/snippet-content/lingallery/

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 :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'}
]"/>

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 :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>

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 add Lingallery as a plugin with disabled SSR:

plugins: {
  { src: '~/plugins/lingallery', ssr: false }
}

Lingallery options

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

Prop Description Default Type
width Specifies the width of the main image area in pixels. 600 Number
height Specifies the height of the main image area in pixels. 400 Number
responsive Defines whether the image gallery should take up all available width space. false Boolean
startImage Sets the index of the image the gallery should start with. 0 Number
baseColor Defines the base color (at the moment only for the thumbnail border color) #fff String
accentColor Defines the accent color (at the moment only for the spinner and the active thumbnail border) #3498db String
textColor Defines the text color of the caption. #000 String
showThumbnails Defines whether thumbnails should be displayed. true Boolean
showControls Defines whether left / right controls should be displayed. true Boolean
mobileHeight If set to a number larger than 0 the image height will not exceed that value on mobile devices 0 Number
mobileHeightBreakpoint If mobileHeight is defined this prop sets the breakpoint below which the image height will not exceed the mobileHeight value 0 Number
leftControlClass If defined adds a class to the left control button to enable custom icons '' String
rightControlClass If defined adds a class to the right control button to enable custom icons '' String
disableImageClick If set to true a click on the large image will not show the next image false Boolean

Lingallery addons

I am planning on creating several additional features. Since I try to keep the basic plugin as small as possible those addons will not be part of Lingallery by default. To enable an addon you explicitly have to pass an object prop "addons" to Lingallery containing all the addons you would like to activate as well as their options.

Here is a list of currently existing addons:

Large View

By passing the prop enableLargeView you can enable the large view feature. When clicking on the large main image a modal will open up with the image displaying in full size.

<lingallery :addons="{ enableLargeView: true }" ... />

If you want to show a different image (maybe a larger version) in the modal you can add the property largeViewSrc into the items prop.

<lingallery :addons="{ enableLargeView: true }" :items="[{ src: 'image1.jpg', largeViewSrc: 'image1_large.jpg' }]" ... />

Picture Element

Sometimes you might want to display different images depending on the user's screen size. Responsive images in Lingallery are possible with this addon. You can specify both a type and a media attribute. Be sure to enable the addon by setting enablePictureElement: true in the addons object.

<lingallery
  :addons="{ enablePictureElement: true }"
  :items="[
    {
      src: 'image1.jpg',
      pictureElement: [
        {
          srcset: 'image1_large.jpg',
          media: '(min-width: 600px)',
          type: 'image/jpg'
        },
        {
          srcset: 'image1_large.webp',
          media: '(min-width: 600px)',
          type: 'image/webp'
        },
        {
          srcset: 'image1_huge.jpg',
          media: '(min-width: 1200px)'
        }
      ]
    }
  ]"
  ...
/>

Comments

  • Bump path-parse from 1.0.6 to 1.0.7
    Bump path-parse from 1.0.6 to 1.0.7

    Aug 10, 2021

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Demo URI - not found
    Demo URI - not found

    Sep 24, 2021

    Hi, demo url used in README don't work (https://lingulo.com/snippet-content/lingallery/).

    Reply
  • Doesn't work with Nuxt
    Doesn't work with Nuxt

    Oct 2, 2021

    Would be appreciated to have this plugin working with Nuxt, I've tried the setup below and it doesn't work.

    plugins/test.js

    import Vue from 'vue'
    import VueLazyLoad from 'vue-lazyload'
    import LightBox from 'vue-image-lightbox'
    
    Vue.use(VueLazyLoad)
    Vue.component('lingallery', LightBox)
    

    nuxt.config.js

    plugins: [
        { src: '~/plugins/test.js', ssr: false }, // without ssr also doesn't work.
    ],
    

    component.vue

    <template>
      <lingallery
        :width="width"
        :height="height"
        :items="items"
        :media="media"
      />
    </template>
    
    <script lang="ts">
    import Vue from 'vue'
    
    export default Vue.extend({
      data() {
        return {
          width: 600,
          height: 400,
          items: [
            {
              src: "https://picsum.photos/600/400/?image=0", // for a local file it also doesn't work
              thumbnail: "https://picsum.photos/600/400/?image=0", // for a local file it also doesn't work
              caption: 'Some Caption',
              id: 'someid1',
            },
            {
              src: "https://picsum.photos/600/400/?image=0", // for a local file it also doesn't work
              thumbnail: "https://picsum.photos/600/400/?image=0", // for a local file it also doesn't work
            },
          ],
          media: ['(min-width: 600px)'],
        }
      },
    })
    </script>
    

    There's nothing in the console and on the page I can simply see an empty page with 1/1 as in the screenshot below. ss

    Reply
  • Bump url-parse from 1.4.7 to 1.5.3
    Bump url-parse from 1.4.7 to 1.5.3

    Oct 5, 2021

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • competible on vue 3 ?
    competible on vue 3 ?

    Dec 24, 2021

    like a title this component can run on vue 3 ? cuse i run in vue 3 i get error : Cannot read properties of undefined (reading 'component')

    Reply
  • Bump follow-redirects from 1.13.0 to 1.14.7
    Bump follow-redirects from 1.13.0 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.13.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Error in console this.items[this.startImage] is undefined
    Error in console this.items[this.startImage] is undefined

    Sep 28, 2019

    I'm getting this error [Vue warn]: Error in mounted hook: "TypeError: this.items[this.startImage] is undefined"

    Reply
  • Dont show first(default) pic
    Dont show first(default) pic

    Aug 1, 2019

    Hi, i use async request and when get images i can not get first (default) selected image , but when i click on 'thumbnails' then get on panel. How can i avoid this ? Thanks

    Reply
  • Get errors when adding accentColor
    Get errors when adding accentColor

    May 5, 2019

    Get erros when tying to add accentColor or baseColor to the mix.

    <lingallery :width="800" :height="400" :responsive=true :accentColor="#ffffff" :mobile-height="300" :items="[
        {src: 'https://picsum.photos/800/500/?image=0', thumbnail: 'https://picsum.photos/64/64/?image=0'},
        {src: 'https://picsum.photos/800/500/?image=10', thumbnail: 'https://picsum.photos/64/64/?image=10'}
    ]"/>
    

    Error; app.js:47084 [Vue warn]: Error compiling template: invalid expression: Unexpected identifier in #ffffff Raw expression: :accentcolor="#ffffff"

    Reply
  • [Vue warn]: Failed to resolve directive: touch
    [Vue warn]: Failed to resolve directive: touch

    Mar 13, 2019

    [Vue warn]: Failed to resolve directive: touch

    (found in at Lingallery.vue) vue.common.js:612

    warn44VueJS
    

    run lingallery.umd.js:1066 notify lingallery.umd.js:1083 flush lingallery.umd.js:1662

    Reply
  • dont work styles
    dont work styles

    Mar 13, 2019

    2019-03-13_14-15-11

    Reply
  • Is it possible select current id in gallery ?
    Is it possible select current id in gallery ?

    Jul 31, 2019

    Hi, I am using lingallery package and need to get current id in chosen image . I get ids from api and f.e when user chose image i need to get current id How can i get it ? Thanks

    Reply