https://github.com/newtonmunene99/img-gallery
An Image Gallery Component
https://github.com/newtonmunene99/img-gallery
gallery image-gallery npm-package stenciljs stenciljs-components web-component web-components
Last synced: about 1 year ago
JSON representation
An Image Gallery Component
- Host: GitHub
- URL: https://github.com/newtonmunene99/img-gallery
- Owner: newtonmunene99
- License: mit
- Created: 2018-07-13T22:02:24.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-12T04:40:22.000Z (almost 8 years ago)
- Last Synced: 2025-05-07T22:08:48.769Z (about 1 year ago)
- Topics: gallery, image-gallery, npm-package, stenciljs, stenciljs-components, web-component, web-components
- Language: TypeScript
- Homepage: https://newtonmunene99.github.io/img-gallery/
- Size: 12.1 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Image-Gallery
**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.**
> npm i @themindleproject/img-gallery
This is a web component to help users integrate a masonry style image gallery in their websites and PWAs.
## Using this component
### Script tag
- Put this script tag `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### Node Modules
- Run `npm i @themindleproject/img-gallery --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm i @themindleproject/img-gallery --save`
- Add an import to the npm packages `import @themindleproject/img-gallery;`
- Then you can use the element anywhere in your template, JSX, html etc
#### Usage Example
**Please do not use both methods shown below. i.e dont combine the two. If combined the component will default to the 2nd method**
1. Place your images as direct children of the component
- It is important that the images are direct children. Do not place them in a container such as a `div` or `section` etc.
```html
```
2. Feed an array of image source urls to the src property
**We're having a few bugs with this method. It will be fixed very soon.**
- Please note that this is for use within frameworks such as Angular, Ionic Framework, Stencil, React etc.
In your ts file.
```typescript
URLArray: Array = ['example1.jpg','example2.jpg','example2.jpg','example2.jpg'];
```
Then In your html file.
```jsx
```
Or In your tsx file
```tsx
URLArray: Array = ['example1.jpg','example2.jpg','example2.jpg','example2.jpg'];
render() {
return(
)
};
```
#### Component Properties
Image Gallery Component only takes two optional properties.
1. `src` property discussed above;
2. `color` property.
- 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.
```html
...
...
```
### img-gallery-image
- We have introduced a new component `img-gallery-image`.
- It's automatically used together with `img-gallery` to add lazy-loading.
- You can also use it as standalone.
#### Usage example
1. Standalone
```html
```
##### Styling
I know that it can be a pain when I force you to use styles you don't want.
I've added css4 variables to help you style different aspects.
1. `--img-gallery-image-width` for the width
2. `--img-gallery-image-height` for the height
3. `--img-gallery-image-max-width` for max-width
4. `--img-gallery-image-max-height` for max-height
5. `--img-gallery-image-border-radius` for border-radius.
_Example_
```css
img-gallery-image {
--img-gallery-image-border-radius: 10px;
--img-gallery-image-height: 100%;
}
```
#### Extras
- Click or Tap on an image to View
- In View Mode Click or Tap on the far right to view next, far left to view previous. No distracting arrows.
#### Coming Soon
- [ ] slideshow
- [ ] zoom images
- [x] lazy-loading images
I won't be doing images with captions. But if I change my mind I will do it in a different component.