Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zolcsi/ngx-simple-gallery
Simple Gallery Angular Library
https://github.com/zolcsi/ngx-simple-gallery
angular gallery gallery-images image-viewer
Last synced: 5 days ago
JSON representation
Simple Gallery Angular Library
- Host: GitHub
- URL: https://github.com/zolcsi/ngx-simple-gallery
- Owner: zolcsi
- License: mit
- Created: 2024-09-25T15:01:31.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-08T12:59:23.000Z (5 days ago)
- Last Synced: 2024-11-08T13:19:53.228Z (5 days ago)
- Topics: angular, gallery, gallery-images, image-viewer
- Language: TypeScript
- Homepage: https://zolcsi.github.io/ngx-simple-gallery/
- Size: 19.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-simple-gallery - A lightweight gallery library for Angular 18 that presents all images as thumbnails, expanding them to full size upon clicking or tapping. (Table of contents / Third Party Components)
- awesome-angular - ngx-simple-gallery - A lightweight gallery library for Angular 18 that presents all images as thumbnails, expanding them to full size upon clicking or tapping. (Table of contents / Third Party Components)
README
# Ngx Simple Gallery
[![npm version](https://badge.fury.io/js/ngx-simple-gallery.svg)](https://badge.fury.io/js/ngx-simple-gallery)
[![codecov](https://codecov.io/gh/zolcsi/ngx-simple-gallery/graph/badge.svg?token=772F41V3M1)](https://codecov.io/gh/zolcsi/ngx-simple-gallery)A simple gallery lib for Angular [18]. It displays all the images as thumbnails and makes it big, when clicked/tapped on it.
- mobile friendly
- lightweight
- use images from any source
- the gallery takes up as much space as you let it
- navigate forwards/backwards with keyboard arrows or touch/click on arrows in the showcase dialog
- loading spinner while loading
- you can define a thumbnail or leave it empty. It is recommended to provide it though, because of performance reasons.### [**Demo**](https://zolcsi.github.io/ngx-simple-gallery/) | [**Changelog**](https://github.com/zolcsi/ngx-simple-gallery/blob/main/CHANGELOG.md)
## Installation
```sh
npm install --save ngx-simple-gallery @angular/cdk
```
add the following line to your global styles (by default "styles.(scss|css)") if it is not included yet:
```
@import '@angular/cdk/overlay-prebuilt.css';
```## Versioning
| Gallery | Angular | Readme |
| --------- |-----------| ------------------------------------------------------------ |
| `<=1.x.x` | `>=18` | here |## Usage
### 1. Import the gallery into your component
```ts
import { NgxSimpleGalleryComponent } from '@zolcsi/ngx-simple-gallery';@Component({
standalone: true,
imports: [NgxSimpleGalleryComponent],
})
export class AppComponent {}
```### 2. List the gallery items
```js
import { GalleryItem } from '@zolcsi/ngx-simple-gallery';@Component({...})
export class AppComponent {
galleryItems: GalleryItem[] = [
{
src: '/img/image1.jpg'
},
{
src: 'https://picsum.photos/id/237/2000/3000',
thumbnail: 'https://picsum.photos/id/237/160/160',
}]
}
```### 3. Render the gallery with the items assembled previously
```html
```
## Parameters
### Input parameters
| Name | Required | Type | Default | Description |
|---------------|----------|---------------|---------------------------------------|----------------------------------------------|
| galleryItems | yes | GalleryItem[] | [ ] | Contains the list of images |
| emptyMessage | no | string | 'Empty gallery, no images provided.' | Message to show in case empty items provided |
| thumbnailSize | no | number | 160 | The width/height of the thumbnails in px |### With all the input parameters set:
```html
```