{"_id":"@anoram/svelte-images","_rev":"1-07c151c47e64fbcc77fb0381e967f119","name":"@anoram/svelte-images","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@anoram/svelte-images","version":"0.0.1","description":"A Svelte component for displaying images fork of svelte-images","main":"./src/index.js","scripts":{"build":"rollup -c","dev":"NODE_ENV=dev rollup -c -w","start":"sirv docs --single","start:dev":"sirv docs --single --dev","build:dev":"rollup -c"},"repository":{"type":"git","url":"git+https://github.com/peopledrivemecrazy/svelte-images.git"},"keywords":["svelte","images","sveltejs","sveltev3"],"author":{"name":"shriji"},"license":"MIT","bugs":{"url":"https://github.com/peopledrivemecrazy/svelte-images/issues"},"homepage":"https://github.com/peopledrivemecrazy/svelte-images#readme","devDependencies":{"eslint":"^6.8.0","eslint-config-airbnb-base":"^14.0.0","eslint-plugin-import":"^2.20.0","eslint-plugin-svelte3":"^2.7.3","rollup":"^1.27.9","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-livereload":"^1.0.4","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-svelte":"^5.1.1","rollup-plugin-terser":"^5.2.0","sirv-cli":"^0.4.5","svelte":"^3.16.1","svelte-preprocess":"^3.3.0","typescript":"^3.6.4"},"gitHead":"dee3e7daf4237d8d979b9ea591d94952a207530c","_id":"@anoram/svelte-images@0.0.1","_nodeVersion":"12.17.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-L7oFR88vhJLNIR6CGgvZB47IrtRYMDif9L9+Q/kzWV4zJTrTJ7XBooPjh5fFjEIjh/lLFrbtFltDc05lbmAjEA==","shasum":"ca64ff63a2fc2d8aa1b6839624dcde8565de59b2","tarball":"https://registry.npmjs.org/@anoram/svelte-images/-/svelte-images-0.0.1.tgz","fileCount":18,"unpackedSize":17695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1eqdCRA9TVsSAnZWagAAbC4QAIJRXEsKO1UISeCtwlhU\nzyenmUTMGQZHEKTY3+jjUe21jQnXaPGrGVpL8JnPJdwFv3y2v3xOaifzHd1i\nBDsmFEfjANg2cTwBPfQo2QrYoixn9Tftu/OqC4hZuC9ryfOE3zyDRMK0Bmwa\nmldE9Iy0h8Nu+gZ0HfBcLSecLZn+0BAbrqp/ceKPdpKS7SNw5slp25YL6j2E\nDGizYC0SAgm1cLPEWxNd1Y5molKBppRqx+Ikpw7LduF2dbMDqBaIHndrrC5c\nttO8iJFxhNX6zNhqUpDbHJ0B/Gns7qMCDHGGn8naXQScVoyvBylzAzI+VgXY\nwHTy0Mr7Q135dgou8v/BSFSgytCAogfEn4zpHCHRHljbvilIUMHswXe9NVRI\nWuJtQ6vqjsRAp5BAqHK1ZynikSibluDT7TITAE7PFWbukL5wuzu2XNz2MLu5\ndwpFtakwFGdPrualGvKnxDsFkCtMO8Tcv79T2ufe1BR0Z/8vuN/sF22LVdIu\nq64jTsXQj1VCCtRfcW7FWCpfQEPe4WVwmCrjUc6sRFDypsH1mVirjDjpH2h+\nC6M80F92Ip4LgKr7GezePTdKGay735BT4QNNL16HpmLjicHQekIeKeZdOKFg\np7XYFAy9RWObAVc17MHQMDZLVgtQiGIuyvsxEFe25nzCq3J7O3x/UCPSrAdf\n/J7W\r\n=NBRO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGEtFSPz5ESFvZhYStmAlLCHDEN1XwMG6kNxBM+cqQjAiBLSlflv32xnSqwwMNYmlUACsBz9+5fpsieTRaOOqe5Tg=="}]},"_npmUser":{"name":"shriji","email":"shriji@anoram.com"},"directories":{},"maintainers":[{"name":"shriji","email":"shriji@anoram.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-images_0.0.1_1607854748801_0.5161143462298534"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-13T10:19:08.591Z","0.0.1":"2020-12-13T10:19:08.979Z","modified":"2022-04-04T14:19:05.356Z"},"maintainers":[{"name":"shriji","email":"shriji@anoram.com"}],"description":"A Svelte component for displaying images fork of svelte-images","homepage":"https://github.com/peopledrivemecrazy/svelte-images#readme","keywords":["svelte","images","sveltejs","sveltev3"],"repository":{"type":"git","url":"git+https://github.com/peopledrivemecrazy/svelte-images.git"},"author":{"name":"shriji"},"bugs":{"url":"https://github.com/peopledrivemecrazy/svelte-images/issues"},"license":"MIT","readme":"# This is a fork of svelte-images\r\nA Svelte component for displaying images\r\n\r\n[Demo](https://sjafferi.github.io/svelte-images/)\r\n\r\n\r\nFixed few bugs\r\n## Installation\r\n\r\nInstall svelte-images\r\n   `yarn add svelte-images`\r\n\r\n## Examples\r\n\r\n### Gallery + Carousel\r\n\r\n```html\r\n<script>\r\n  import { Images } from \"svelte-images\";\r\n  const images = [\r\n    {\r\n      src: \"/borat.png\"\r\n    },\r\n    {\r\n      src: \"/borat.png\"\r\n    },\r\n    {\r\n      src: \"/borat.png\"\r\n    },\r\n    {\r\n      src: \"/borat.png\"\r\n    },\r\n    {\r\n      src: \"/borat.png\"\r\n    },\r\n    {\r\n      src: \"/borat.png\"\r\n    }\r\n  ];\r\n</script>\r\n\r\n<style>\r\n  main {\r\n    height: 75vh;\r\n  }\r\n</style>\r\n\r\n<main>\r\n  <Images {images} gutter={5} />\r\n</main>\r\n```\r\n\r\n### Carousel only\r\n\r\n```html\r\n<script>\r\n  import { Carousel } from \"svelte-images\";\r\n  const { Modal, open, close } = Carousel;\r\n\r\n  export let images = [];\r\n\r\n  const popModal = idx =>\r\n    setTimeout(() => {\r\n      open(images, idx);\r\n    }, 0);\r\n</script>\r\n\r\n<style>\r\n  .gallery {\r\n    display: flex;\r\n    flex-flow: row wrap;\r\n  }\r\n\r\n  img {\r\n    width: 100%;\r\n    height: auto !important;\r\n    cursor: pointer;\r\n  }\r\n  img:hover {\r\n    opacity: 0.5;\r\n    filter: grayscale(0.5) blur(1px);\r\n  }\r\n</style>\r\n\r\n<Modal />\r\n\r\n<div class=\"gallery\">\r\n  {#each images as image, i}\r\n    <img\r\n      {...image}\r\n      src={image.thumbnail || image.src}\r\n      alt={image.alt || ''}\r\n      on:click={() => popModal(i)} />\r\n  {/each}\r\n</div>\r\n\r\n```\r\n\r\n### Images component properties\r\n\r\n| Property | Format                                                    | Default                                           |\r\n| -------- | --------------------------------------------------------- | ------------------------------------------------- |\r\n| images*  | `[{ src: \"...\", thumbnail: \"...\", ...<img> attributes }]` | []                                                |  |\r\n| gutter   | number                                                    | 3                                                 |  |\r\n| numCols  | number                                                    | automatically set depending on width of container |\r\n  \r\n## Contributing\r\n\r\nFound a bug or have suggestions for improvement? We would love to hear from you!\r\n\r\nPlease open an issue to submit feedback or problems you come across.","readmeFilename":"README.md"}