You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

angular2-image-gallery

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-image-gallery

Responsive Angular 14 image gallery

14.0.3
Source
npmnpm
Version published
Weekly downloads
85
32.81%
Maintainers
1
Weekly downloads
 
Created
Source

npm version npm downloads

----> compatible with Angular 14+ <----

Responsive image gallery designed for high resolution images.

The project consists of a gallery (+ viewer) and a script for image preparation.

Demo

https://oidamo.de/gallery-demo.html

Fundamentals

Before using the gallery, you have to process all of your images with the convert script.

The processed images will be stored to your applications assets.

The viewer takes care of an optimal image quality being served based on the users screen resolution.

Installation

1. Install graphicsmagick

Follow the instructions: http://www.graphicsmagick.org/README.html#installation

2. Install dependencies

npm install angular2-image-gallery hammerjs --save

3. Import modules

imports: [
  ...,
  Angular2ImageGalleryModule,
  HammerModule
],

4. Run convert script

node node_modules/angular2-image-gallery/convert.js <path/to/your/images>

Add a flag to define the order of the images inside the gallery

-n sort by file name (default)

-d sort chronologically by the original creation time (e.g. for coverages of a wedding)

-c sort by primary image color

Additional optional parameter to support multiple galleries. Add it if you want to put your images into a separate gallery.

--gName=yourGalleryName

<gallery
    [flexBorderSize]="3"
    [flexImageSize]="7"
    [galleryName]="'yourGalleryName'"
    [maxRowsPerPage]="100"
    (viewerChange)="yourNotificationFunction($event)">
</gallery>

All parameters are optional. You may play around on the demo site to find out what parameters suit your needs.

The viewerChange event fires once the viewer component gets opened or closed.

Different use cases

Fetching images from an external data source

Fetching your images from an external data source: CLICK HERE

I don't want to use the convert script and provide my own metadata JSON

This is possible, but not the intent of this project. Please CLICK HERE

Troubleshooting

If the conversion process fails, make sure you have enough swap space provided.

If you experience any other issues, please raise an issue on GitHub.

Keywords

angular

FAQs

Package last updated on 14 Sep 2022

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