@creativeacer/ngx-image-display v1.0.12

NgxImageDisplay

Ngx-Image-Display : Responsive image container

About

This project can be used to display images on a page.

If you like the project please Star it .
Feel free to contribute!

Core features

1. Display multiple images in a set amount of columns or filling the available space.
2. View selected image in full screen.
3. Enable various hover filters.
4. Show image text in overlay.
5. Responsive Design.
6. Support for Image url and base64 input.

Demo ( open code )

ngx-image-display

Fullscreen demo ( live )

ngx-image-display

Available inputs

The component accepts the following inputs.

Input Options

The following settings are available

Image settings options

Container settings options

Hover effect settings

sameSize option settings

Default Settings

If no Display configuration is provided the default settings will be used.

Available outputs

The component outputs the follow events that can be triggered on.

Installation

To install this library, run:
npm

$ npm install @creativeacer/ngx-image-display --save

yarn

$ yarn add @creativeacer/ngx-image-display

Using this library

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { NgxImageDisplayModule } from '@creativeacer/ngx-image-display';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxImageDisplayModule.forRoot() // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use its component in your Angular application:

<!-- You can now use NgxImageDisplay component in app.component.html -->
<h1>
  {{title}}
</h1>
<!--[images] is required-->
<ngx-image-display [images]="images" [sameSize]="SameSizeConfig" [ImageEffect]="ImageEffect" [displayconfig]="displayconfig" (onImageSelected)="logImage($event)"></ngx-image-display>

Interfaces

DisplayConfig {
    columns?: number;
    imageminwidth?: string;   
    fullScreenView?: boolean;  
    containerwidth?: string;  
    containerheight?: string;  
    onclick?: Function;
}

ImageEffect {
    hoverEffectActive?: boolean;
    hoverEffect?: 'zoom' | 'lighten' | 'darken' | 'greyscale' | 'sepia';
}

SameSizeConfig {
  active: boolean;
  imgContainerHeight: string;
}

ImageData  {
    type: 'base64' | 'url';  
    imageData: BaseImage;
} 

BaseImage {
    value: string;  
    subtext?: string;  
    subtextOverlay?: string;
    extension?: 'jpg' | 'jpeg' | 'png' | 'svg';  
}

example value for base64

'data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+go...'