New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

ng-opengallery

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-opengallery

Opengallery is an Angular library component for efficient gallery rendering and interactions (images & videos)

  • 0.0.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

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

PropertyTypeNote
[datasource]Array(Media)Media datasource with data
[config]ConfigConfiguration of the gallery (prefMediaHeight,spacing,layout,viewerEnabled,viewerFullsize,diaporamaDuration,enableAutoPlay)
[config.prefMediaHeight]numberprefered height size of media in the layouts, default is 250
[config.spacing]numberspacing between media, is not taken into account for the caroussel layout, default is 2
[config.layout]LayoutStyleSpecify the media layout you want (SIMPLE, CATALOG, CAROUSEL, MASONRY), default is SIMPLE
[config.viewerEnabled]booleanSpecify whether the modal viewer should appear when a media is clicked, default is true
[config.viewerFullsize]booleanSpecify whether the media in the modal viewer should take the full width and height available, default is false
[config.diaporamaDuration]numberDuration for the diaporama in the modal viewer, if 0 is specified, diaporama is disabled, default is 3
[config.enableAutoPlay]numberSpecify if a media should start when it enters the viewport, default is true
[config.effectClass]stringSpecial effect applied on media defined by the user, if null no effect is applied, default is null

Outputs

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

To-Do / Improvements

  • Move some logic in service and remove from components
  • Add Squared layout
  • Add animations support
  • Add Iframe support

NPM

This package is on npm https://www.npmjs.com/package/ng-opengallery

License

This package is under the MIT license

Keywords

FAQs

Package last updated on 18 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc