@creativeacer/ngx-image-display
Version:
Ngx-Image-Display : Responsive image container
206 lines (150 loc) • 6.88 kB
Markdown
Ngx-Image-Display : Responsive image container
[](https://badge.fury.io/js/%40creativeacer%2Fngx-image-display) [](https://dev.azure.com/creativesuite/GitHub/_build/latest?definitionId=5&branchName=master) [](https://www.codefactor.io/repository/github/creativeacer/ngx-image-display/overview/develop)
***
This project can be used to display images on a page.
**If you like the project please Star it** .
*Feel free to contribute!*
***
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.
[](https://stackblitz.com/edit/ngx-image-display)
[](https://ngx-image-display.stackblitz.io/)
***
The component accepts the following inputs.
Input | Interface | Description
:---:|:---:|---
images | ImageData | This will be the array containing the images you would like the module to display.
sameSize | SameSizeConfig | This will define if the images are scaled to be the same size or not with reference to the selected height.
displayconfig | DisplayConfig | This will set the general configuration for the module.
imageEffect | ImageEffect | This will enable or disable the selected effect when a user hovers over an image.
The following settings are available
**Image settings options**
Option | Default&
:---:|:---:|---
value | *required* | This contains the url or base64 encoded value for the image
subtext | empty | If a string is entered here it will be displayed on the image through an overlay
subtextOverlay | bottom | This will set the height of the overlay that is shown on the image. available options: 'bottom' - 'half' - 'full'
extension | none | You can set this to the correct extension of the provided image.
**Container settings options**
Option | Default&
:---:|:---:|---
columns | Auto-fit | This wil set the amount of columns to display with images. ex: 2 will provide you with 2 images next to each other. if no columns are provided the application will place as many images next to each other as possible
imageminwidth | 300px | This is the minimum resolution for an image, when the containing div is scaled smaller than this an image column will be removed.
fullScreenView | false | If set to true the user will have the option to view each image in fullscreen ( shown in the image in the top right corner )
containerwidth | 100% | Set the width for the image display container.
containerheight | 100% | Set the height for the image display container.
**Hover effect settings**
Option | Default value | Description
:---:|:---:|---
hoverEffectActive | false | This will enable or disable the hover effect when the mouse hovers over an image.
hoverEffect | 'zoom' | This will set the type of effect when hovering over an image. Possible settings: 'zoom' - 'lighten' - 'darken' - 'greyscale' - 'sepia'
**sameSize option settings**
Option | Default&
:---:|:---:|---
active | false | This will set all images in the display to the same height if true.
imgContainerHeight | *required if active = true* | This will be the height all images have if the samesize image active parameter has been set to true.
If no Display configuration is provided the default settings will be used.
***
The component outputs the follow events that can be triggered on.
Event&
:---:|---
onImageSelected | This will emit the image that has been selected when a user clicks on an image. ex: (onImageSelected)="function($event)"
***
To install this library, run:
**npm**
```bash
$ npm install @creativeacer/ngx-image-display --save
```
**yarn**
```bash
$ yarn add @creativeacer/ngx-image-display
```
***
From your Angular `AppModule`:
```typescript
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:
```html
<!-- 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>
```
```typescript
DisplayConfig {
columns?: number;
imageminwidth?: string;
fullScreenView?: boolean;
containerwidth?: string;
containerheight?: string;
onclick?: Function;
}
```
```typescript
ImageEffect {
hoverEffectActive?: boolean;
hoverEffect?: 'zoom' | 'lighten' | 'darken' | 'greyscale' | 'sepia';
}
```
```typescript
SameSizeConfig {
active: boolean;
imgContainerHeight: string;
}
```
```typescript
ImageData {
type: 'base64' | 'url';
imageData: BaseImage;
}
```
```typescript
BaseImage {
value: string;
subtext?: string;
subtextOverlay?: string;
extension?: 'jpg' | 'jpeg' | 'png' | 'svg';
}
```
'data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+go...'