{"id":22897737,"url":"https://github.com/newtonmunene99/img-gallery","last_synced_at":"2025-05-07T22:08:53.644Z","repository":{"id":57166046,"uuid":"140896553","full_name":"newtonmunene99/img-gallery","owner":"newtonmunene99","description":"An Image Gallery Component","archived":false,"fork":false,"pushed_at":"2018-09-12T04:40:22.000Z","size":12731,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T22:08:48.769Z","etag":null,"topics":["gallery","image-gallery","npm-package","stenciljs","stenciljs-components","web-component","web-components"],"latest_commit_sha":null,"homepage":"https://newtonmunene99.github.io/img-gallery/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/newtonmunene99.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-13T22:02:24.000Z","updated_at":"2020-11-26T03:37:54.000Z","dependencies_parsed_at":"2022-08-26T11:50:45.303Z","dependency_job_id":null,"html_url":"https://github.com/newtonmunene99/img-gallery","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newtonmunene99%2Fimg-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newtonmunene99%2Fimg-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newtonmunene99%2Fimg-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newtonmunene99%2Fimg-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/newtonmunene99","download_url":"https://codeload.github.com/newtonmunene99/img-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252961841,"owners_count":21832197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gallery","image-gallery","npm-package","stenciljs","stenciljs-components","web-component","web-components"],"created_at":"2024-12-14T00:18:56.990Z","updated_at":"2025-05-07T22:08:53.619Z","avatar_url":"https://github.com/newtonmunene99.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square)\n\n# Image-Gallery\n\n**img-gallery-image is now used by default. This means Lazy Loading is enabled by default. You can also use it as a standalone component to replace the normal img tag. See usage section near the bottom.**\n\n\u003e npm i @themindleproject/img-gallery\n\nThis is a web component to help users integrate a masonry style image gallery in their websites and PWAs.\n\u003cimg src=\"./docs/assets/images/preview1.png\" height=\"300\"\u003e\n\u003cimg src=\"./docs/assets/images/preview2.png\" height=\"300\"\u003e\n\u003cimg src=\"./docs/assets/images/preview3.png\" height=\"300\"\u003e\n\n## Using this component\n\n### Script tag\n\n- Put this script tag `\u003cscript src='https://unpkg.com/@themindleproject/img-gallery@latest/dist/img-gallery.js'\u003e\u003c/script\u003e` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### Node Modules\n\n- Run `npm i @themindleproject/img-gallery --save`\n- Put a script tag similar to this `\u003cscript src='node_modules/@themindleproject/img-gallery/dist/img-gallery.js'\u003e\u003c/script\u003e` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### In a stencil-starter app\n\n- Run `npm i @themindleproject/img-gallery --save`\n- Add an import to the npm packages `import @themindleproject/img-gallery;`\n- Then you can use the element anywhere in your template, JSX, html etc\n\n#### Usage Example\n\n**Please do not use both methods shown below. i.e dont combine the two. If combined the component will default to the 2nd method**\n\n1.  Place your images as direct children of the component\n\n- It is important that the images are direct children. Do not place them in a container such as a `div` or `section` etc.\n\n```html\n\u003cimg-gallery\u003e\n    \u003cimg src=\"example1.jpg\"\u003e\n    \u003cimg src=\"example2.jpg\"\u003e\n    \u003cimg src=\"example3.jpg\"\u003e\n    \u003cimg src=\"example4.jpg\"\u003e\n    \u003cimg src=\"example5.jpg\"\u003e\n\u003c/img-gallery\u003e\n```\n\n2.  Feed an array of image source urls to the src property\n    **We're having a few bugs with this method. It will be fixed very soon.**\n\n- Please note that this is for use within frameworks such as Angular, Ionic Framework, Stencil, React etc.\n\nIn your ts file.\n\n```typescript\nURLArray: Array\u003cstring\u003e = ['example1.jpg','example2.jpg','example2.jpg','example2.jpg'];\n```\n\nThen In your html file.\n\n```jsx\n\u003cimg-gallery src={URLArray} /\u003e\n```\n\nOr In your tsx file\n\n```tsx\nURLArray: Array\u003cstring\u003e = ['example1.jpg','example2.jpg','example2.jpg','example2.jpg'];\n\nrender() {\n    return(\n        \u003cdiv\u003e\n            \u003cimg-gallery src={this.URLArray}\u003e\u003c/img-gallery\u003e\n        \u003c/div\u003e\n    )\n};\n```\n\n#### Component Properties\n\nImage Gallery Component only takes two optional properties.\n\n1.  `src` property discussed above;\n2.  `color` property.\n\n- This is the background color of the Gallery. If not supplied the Gallery will inherit the background color of the page,div or section that it is placed in. It can either be a valid css color name or a valid css hex color code.\n\n```html\n\u003cimg-gallery color=\"black\"\u003e\n    ...\n\u003c/img-gallery\u003e\n\n\u003c!-- or --\u003e\n\n\u003cimg-gallery color=\"#000\"\u003e\n    ...\n\u003c/img-gallery\u003e\n```\n\n### img-gallery-image\n\n- We have introduced a new component `img-gallery-image`.\n- It's automatically used together with `img-gallery` to add lazy-loading.\n- You can also use it as standalone.\n\n#### Usage example\n\n1.  Standalone\n\n```html\n\u003cimg-gallery-image src=\"example1.jpg\" alt=\"Image\"\u003e\u003c/img-gallery-image\u003e\n```\n\n##### Styling\n\nI know that it can be a pain when I force you to use styles you don't want.\nI've added css4 variables to help you style different aspects.\n\n1.  `--img-gallery-image-width` for the width\n2.  `--img-gallery-image-height` for the height\n3.  `--img-gallery-image-max-width` for max-width\n4.  `--img-gallery-image-max-height` for max-height\n5.  `--img-gallery-image-border-radius` for border-radius.\n\n_Example_\n\n```css\nimg-gallery-image {\n  --img-gallery-image-border-radius: 10px;\n  --img-gallery-image-height: 100%;\n}\n```\n\n#### Extras\n\n- Click or Tap on an image to View\n- In View Mode Click or Tap on the far right to view next, far left to view previous. No distracting arrows.\n\n#### Coming Soon\n\n- [ ] slideshow\n- [ ] zoom images\n- [x] lazy-loading images\n\nI won't be doing images with captions. But if I change my mind I will do it in a different component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewtonmunene99%2Fimg-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewtonmunene99%2Fimg-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewtonmunene99%2Fimg-gallery/lists"}