{"_id":"@atefr/vue-light-gallery","name":"@atefr/vue-light-gallery","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@atefr/vue-light-gallery","version":"1.0.2","description":"VueJS lightweight image gallery for both mobile and desktop browsers.","author":{"name":"Pere Monfort","email":"24bitjs@gmail.com"},"license":"MIT","main":"dist/vue-light-gallery.umd.js","module":"dist/vue-light-gallery.esm.js","unpkg":"dist/vue-light-gallery.min.js","browser":{"./sfc":"src/light-gallery.vue"},"scripts":{"build":"npm run build:umd & npm run build:es & npm run build:unpkg","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/vue-light-gallery.umd.js","build:es":"rollup --config build/rollup.config.js --format es --file dist/vue-light-gallery.esm.js","build:unpkg":"BUILD_MODE=minify rollup --config build/rollup.config.js --format iife --file dist/vue-light-gallery.min.js","lint":"eslint ./","prepublish":"npm run build","patch":"npm version patch","minor":"npm version minor","major":"npm version major","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/atefr/vue-light-gallery.git"},"bugs":{"url":"https://github.com/atefr/vue-light-gallery/issues"},"keywords":["vue-light-gallery-","vuejs-light-gallery","gallery","images","lightbox","lightweight","mobile","responsive","tough","vue","vuejs","vue-component","vue-plugin"],"devDependencies":{"babel-eslint":"^10.0.1","eslint":"^5.16.0","eslint-plugin-vue":"^5.2.2","node-sass":"^4.12.0","rollup":"^1.11.3","rollup-plugin-buble":"^0.19.6","rollup-plugin-cleanup":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-terser":"^4.0.4","rollup-plugin-vue":"^5.0.0","vue":"^2.6.10","vue-template-compiler":"^2.6.10"},"homepage":"https://github.com/atefr/vue-light-gallery#readme","directories":{"example":"example"},"gitHead":"565f9045434136c371a698e6b4c1320838e979ce","_id":"@atefr/vue-light-gallery@1.0.2","_nodeVersion":"18.4.0","_npmVersion":"8.13.1","dist":{"integrity":"sha512-flEu91eqVdPb0vtu5cq8cH25V1MjhD4FGdVg5cfCZAonJDZ8W/AWQhO9BWzjk52jZh5lQuV1+ZuP1LQfGlhTSg==","shasum":"f579b98273306c90bc296819b564705e3be65a16","tarball":"https://registry.npmjs.org/@atefr/vue-light-gallery/-/vue-light-gallery-1.0.2.tgz","fileCount":7,"unpackedSize":120703,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPIPLFuZOWOHESrQgcR9tdl4+yEgTRa9OXVI1MKfmS0QIhAKO02eJnwVktbKmmuL4F3RFQ0xVwz69M/XlknBieDICU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixrL2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFjBAAhftdzbPj272bADdr+ZIqpRFwSvtfHlX9/wYe92IZbonjtMIu\r\nm57z8LRvlJlbgw8DPIUxL2j9qTEt4OT2TWGBKt1kxkJDnNxmGlZ5moF6ELGp\r\nffwtUmE7eaRKr0vXVL98r3bXHzNmACIOj/9qxsflDn9/3/eUBL2Z7ouWsVLA\r\nKgqy/mGBAzHnylEkZL5YX3FuCVcKjECi/Yr1ogg8y9g3klQoBdPHceOa1JSY\r\n0NivOd/ZQZFfF8W/QJBs2qa363SMHN/59Q5pOasqOgbe9Bo451c0bYTiCd1x\r\nwLqhyr+nOj2K/0oZGL0kkfptXQpETsYymrCl4L+CefMCPCu7iuwPP05hmFOV\r\nsgpDf/nL8NbK9UbPjcv2cqv7QfyFcanxl18nbhn+4zp6CYAaF4yEacPvJRwj\r\nSVoPnb9DYqNYTjG3Xnd7oOQRpBAZ1FuG1HTWr1X5KAboDxJm435qJ4xBaHYy\r\n4UJYsOm7FdVUGW2mU0ZYE1c8/Vgfrn8UjCIM6m4J8OZFvasY/OoDKlPqDCdH\r\nQIKHIN0Vedpb2+FCZFVsDzfi1XV9lgqUIQLlTCviNl4nlnuZbCojceM/fxti\r\n+LAsqMp9gnZvdneN3eWg4SK+mSFhhIvDjDLGRnOk4R0r+UCSRi7JuVYDDLYh\r\nyCz7MJwChg+KBTDt3jr9yk5StLPx8s3n+sI=\r\n=PAgH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"atefr","email":"ateframadan8822@gmail.com"},"maintainers":[{"name":"atefr","email":"ateframadan8822@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-light-gallery_1.0.2_1657189109845_0.9746726514927795"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-07T10:18:29.760Z","1.0.2":"2022-07-07T10:18:30.066Z","modified":"2022-07-07T10:18:30.201Z"},"maintainers":[{"name":"atefr","email":"ateframadan8822@gmail.com"}],"description":"VueJS lightweight image gallery for both mobile and desktop browsers.","homepage":"https://github.com/atefr/vue-light-gallery#readme","keywords":["vue-light-gallery-","vuejs-light-gallery","gallery","images","lightbox","lightweight","mobile","responsive","tough","vue","vuejs","vue-component","vue-plugin"],"repository":{"type":"git","url":"git+https://github.com/atefr/vue-light-gallery.git"},"author":{"name":"Pere Monfort","email":"24bitjs@gmail.com"},"bugs":{"url":"https://github.com/atefr/vue-light-gallery/issues"},"license":"MIT","readme":"# vue-light-gallery\r\nVueJS lightweight image gallery for both mobile and desktop browsers.\r\n\r\n- Standalone: Zero-dependencies.\r\n- Fully responsive.\r\n- Keyboard and Touch support.\r\n- Multiple galleries on one page.\r\n- Lazy & smart image preloading.\r\n- Color customization.\r\n\r\n## Demo\r\n\r\n[View Demo](https://peremp.github.io/vue-light-gallery/index.html)\r\n\r\n## License\r\n\r\nMIT License\r\n\r\n## install\r\n\r\n```bash\r\n// Yarn\r\nyarn add vue-light-gallery\r\n\r\n// NPM\r\nnpm install vue-light-gallery\r\n```\r\n\r\n## Usage\r\n### As a local component\r\n```html\r\n<template>\r\n  <div>\r\n    <LightGallery\r\n      :images=\"images\"\r\n      :index=\"index\"\r\n      :disable-scroll=\"true\"\r\n      @close=\"index = null\"\r\n    />\r\n    <ul>\r\n      <li\r\n        v-for=\"(thumb, thumbIndex) in [\r\n          'path/to/thumb_1.jpeg',\r\n          'path/to/thumb_2.jpeg',\r\n        ]\"\r\n        :key=\"thumbIndex\"\r\n        @click=\"index = thumbIndex\"\r\n      >\r\n        <img :src=\"thumb\">\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import Vue from 'vue';\r\n  import { LightGallery } from 'vue-light-gallery';\r\n\r\n  export default {\r\n    components: {\r\n      LightGallery,\r\n    },\r\n    data() {\r\n      return {\r\n        images: [\r\n          { title:'img 1', url: 'path/to/image_1.jpg' },\r\n          { title:'img 2', url: 'path/to/image_2.jpg' },\r\n        ],\r\n        index: null,\r\n      };\r\n    },\r\n  };\r\n</script>\r\n```\r\n\r\n### As a Global component\r\n```js\r\n// Your APP entry point.\r\n// F.E: index.js\r\nimport Vue from 'vue';\r\nimport LightGallery from 'vue-light-gallery';\r\n\r\nVue.use(LightGallery);\r\n\r\nnew Vue(/* ... */);\r\n```\r\n```html\r\n<!-- Component.vue -->\r\n<template>\r\n  ...\r\n    <LightGallery ...props />\r\n  ...\r\n</template>\r\n```\r\nOr if you want to change the component id:\r\n```js\r\n// Your APP entry point.\r\n// F.E: index.js\r\nimport Vue from 'vue';\r\nimport LightGallery from 'vue-light-gallery';\r\n\r\nVue.use(VueLightGallery, { componentId: 'custom-gallery' });\r\n\r\nnew Vue(/* ... */);\r\n```\r\n\r\n```html\r\n<!-- Component.vue -->\r\n<template>\r\n  ...\r\n    <custom-gallery ...props />\r\n  ...\r\n</template>\r\n```\r\n\r\n## Props\r\n\r\n| Props               | Type      | Default                                         | Description                   |\r\n| --------------------|:----------| ------------------------------------------------|-------------------------------|\r\n| images              | Array     | []                                              | List of Images                |\r\n| index               | Number    | null                                            | index of the displayed image  |\r\n| disableScroll       | Boolean   | false                                           | Disable the scroll            |\r\n| background          | String    | rgba(0, 0, 0, 0.8)                              | Main container background     |\r\n| interfaceColor      | String    | rgba(255, 255, 255, 0.8)                        | Icons color                   |\r\n\r\n\r\n### Images definition\r\n\r\nWithout title: `Array<string>`\r\n```js\r\n  const images = [\r\n    'http://url.com/img1.jpg',\r\n    'http://url.com/img2.jpg',\r\n  ];\r\n```\r\n\r\nWith title: `Array<Object>`\r\n```js\r\n  const images = [\r\n    { title: 'image 1', url: 'http://url.com/img1.jpg' },\r\n    { title: 'image 2', url: 'http://url.com/img2.jpg' },\r\n  ];\r\n```\r\n\r\nThe title will only appear if `Object.title` property is defined.\r\n\r\n## Events\r\n\r\n| Name                | Params              | Description                                     |\r\n| --------------------|:--------------------| ------------------------------------------------|\r\n| close               |                     | Triggered when the lightbox is closed           |\r\n| slide               | { index: Number }   | Triggered when the image change (next or prev)  |\r\n\r\n\r\n## Usage with Nuxt\r\n\r\nCreate the plugin `lightGallery.client.js`:\r\n\r\n```js\r\nimport Vue from 'vue';\r\nimport VueLightGallery from 'vue-light-gallery';\r\n\r\nVue.use(VueLightGallery);\r\n```\r\n\r\nAdd the plugin to `nuxt.config.js`:\r\n\r\n```\r\nplugins: [\r\n  '~/plugins/lightGallery.client.js',\r\n],\r\n```\r\n\r\nWrap the component in Nuxt's [`no-ssr` component](https://nuxtjs.org/api/components-no-ssr/).\r\n```html\r\n<no-ssr>\r\n  <LightGallery ... />\r\n</no-ssr>\r\n```\r\n\r\n## Allusions\r\n- Inspired by [BaguetteBox](https://github.com/feimosi/baguetteBox.js)\r\n- Spinner extracted from  [epic-spinners](https://github.com/epicmaxco/epic-spinners)\r\n","readmeFilename":"README.md"}