Skip to content

CreativeAcer/ngx-image-display

Repository files navigation

NgxImageDisplay

Ngx-Image-Display : Responsive image container

npm version Build Status CodeFactor GitHub open issues PRs Welcome

About


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

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

Example

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. Retrieve data with OnSelect function for each seperate image
  4. Enable various hover filters.
  5. Show image text in overlay.
  6. Responsive Design.
  7. 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 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.

Input Options

The following settings are available

Image settings options

Option Default value Description
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.

Image Settings

Container settings options

Option Default value Description
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.

Container Settings

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'

Normalzoomlighten
darkengreyscalesepia

sameSize option settings

Option Default value Description
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.

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.

Event name Description
onImageSelected This will emit the image that has been selected when a user clicks on an image. ex: (onImageSelected)="function($event)"

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...'

Future development information

Here you can find some general info for contribution

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Creating Library

Run ng g library libname

Build npm package

from root (build with --prod to disable Ivy compiler) ng build ngximagedisplay --prod

publish

npm login
cd to dist/ngximagedisplay folder npm publish --access public