ngx-doe-gallery

Doe Gallery

Performant, responsive, easy to use Angular 8+ gallery

Demo | Stackblitz | Docs

Why ngx-doe-gallery?

Because it gives you the doe eyes! Seriously though, use it if you need:

• Great performance and feel both on mobile and desktop
• Very small size - gallery itself has just 8kB gzipped! It also packs no dependencies
• Easy usage and lots of customizations
• It just works!

Installation

npm i -S ngx-doe-gallery@latest

Usage

In your ng module

import { GalleryModule } from 'ngx-doe-gallery';

@NgModule({
  imports: [ GalleryModule ]
})
...

In your component

import { GalleryImage } from 'ngx-doe-gallery';

@Component({...})
export class AppComponent {
  images = [ new GalleryImage('kitten1.jpg') ]
}

In your component template

<doe-gallery [items]="images"></doe-gallery>

Development

Install dependencies

In the root of the project, run

npm ci

Serve

npm start

Test

npm test

Changelog

[1.0.0-alpha.0] - 2020-05-23

Added

• Ability to display multiple items in gallery viewer at once. This is very easily done by setting CSS width of doe-viewer li to eg. 50%. Selected item is always centered and items around it are preloaded if lazy loading is on
• Type definition for ng-template context of thumbnail custom template. It's called ThumbTemplateContext

Fixed

• Fixed background flashes in Firefox when new images slide into doe-viewer's scrollport.