Ng-opengallery NPM

Opengallery

Opengallery is an Angular library component for efficient gallery rendering and interactions (images & videos). The gallery layout is responsive for all devices and loads the content only if it's in the viewport. A media viewer is shipped and included with this library. You can configure the component the way you want.

Demo

Try it out here: DEMO or clone this repo and run ng serve for a full demo of opengallery. Built with angular version 9.

Features

Fast & efficient gallery rendering
Loads content when they enter the viewport
Supports video/image mixed in the gallery
Play/Pause the video when the enter/exit the viewport (some browser block autoplay)
Different layouts to choose from and customise the way you want it (simple, catalog, carousel, masonry)
Include a media viewer modal to click and view the media (diaporama support, keystroke support)
Automatically hides media when they cannot be loaded
Detect dynamically new changes in medias and adapt itself

How to use

First install the package with the command npm i ng-opengallery

Then, in your module.ts, import the library module

import { NgOpengalleryModule } from 'ng-opengallery';

And add it to your imports modules, then you can use it in any component.html

<ng-opengallery
    [datasource]='this.data'
    [config]='this.config'
    (change)='onChange($event)'
    (error)='onError($event)'
    (selection)='onSelection($event)'
    (open)='onOpen($event)'>
</ng-opengallery>

If you want a full code demo, check out the repository on github here

Inputs

Property	Type	Note
datasource	Array(Media)	Media datasource with data
config	Config	Configuration of the gallery (prefMediaHeight,spacing,layout,viewerEnabled,viewerFullsize,diaporamaDuration,enableAutoPlay)
config.prefMediaHeight	number	prefered height size of media in the layouts, default is 250
config.spacing	number	spacing between media, is not taken into account for the caroussel layout, default is 2
config.layout	LayoutStyle	Specify the media layout you want (SIMPLE, CATALOG, CAROUSEL, MASONRY), default is SIMPLE
config.viewerEnabled	boolean	Specify whether the modal viewer should appear when a media is clicked, default is true
config.viewerFullsize	boolean	Specify whether the media in the modal viewer should take the full width and height available, default is false
config.diaporamaDuration	number	Duration for the diaporama in the modal viewer, if 0 is specified, diaporama is disabled, default is 3
config.enableAutoPlay	number	Specify if a media should start when it enters the viewport, default is true
config.effectClass	string	Special effect applied on media defined by the user, if null no effect is applied, default is null

Outputs

Event	Type	Note
(change)	Media	Emits the current media when the diaporama changes automatically or by the user (carousel,media viewer)
(error)	Media	Emits the media that caused an error (could not be loaded)
(selection)	Media	Emits the media that was selected by the user
(open)	boolean	Emits a boolean when the media viewer is opened or closed